background-image.uvue 700 字节
Newer Older
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
1
<template>
xuty73419315's avatar
xuty73419315 已提交
2
	<scroll-view style="flex:1">
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
3
		<view>
W
wanganxp 已提交
4
			<text>不支持背景图片,仅支持linear-gradient方法</text>
shutao-dc's avatar
shutao-dc 已提交
5 6 7 8
				<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 已提交
9
		</view>
shutao-dc's avatar
shutao-dc 已提交
10
	</scroll-view>
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
11 12 13
</template>

<script>
shutao-dc's avatar
shutao-dc 已提交
14 15 16 17 18 19 20
  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 已提交
21 22 23 24 25 26 27
</script>

<style>
	.common {
		width: 500rpx;
		height: 500rpx;
	}
shutao-dc's avatar
shutao-dc 已提交
28
</style>