background-image.uvue 780 字节
Newer Older
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
1
<template>
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
2 3 4
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
5
		<view>
W
wanganxp 已提交
6
			<text>不支持背景图片,仅支持linear-gradient方法</text>
shutao-dc's avatar
shutao-dc 已提交
7 8 9 10
				<view v-for="(direction) in directionData">
					<text>background-image: linear-gradient({{direction}}, red, yellow)</text>
				<view class="common" :style="{'background-image': 'linear-gradient('+direction+', red, yellow)'}"></view>
      </view>
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
11
		</view>
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
12 13 14
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
15 16 17
</template>

<script>
shutao-dc's avatar
shutao-dc 已提交
18 19 20 21 22 23 24
  export default {
    data(){
      return {
        directionData: ['to right', 'to left', 'to bottom', 'to top', 'to bottom left', 'to bottom right', 'to top left', 'to top right']
      }
    }
  }
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
25 26 27 28
</script>

<style>
	.common {
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
29 30
		width: 250px;
		height: 250px;
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
31
	}
shutao-dc's avatar
shutao-dc 已提交
32
</style>