uni-app 横屏滚动抽奖

横屏滚动抽奖

模拟效果

代码：

<template>
	<view class="item_contents">
		<view class="cons_list">
			<scroll-view scroll-x="true" class="scroll_list">
				<view class="lists_cons" :style="'transform: translateX('+moveX+'rpx);'">
					<block v-for="(item,index) in goodsDetails" :key="item.id">
						<view :id='item.goods_id' class="detalis" :style="'background-color:'+item.color+';'"></view>
					</block>
				</view>
			</scroll-view>
		</view>
		<view class="cons_list_mask">
			
		</view>
	</view>
</template>

<script>
	export default {
   
		name:"horizontalScroll",
		data() {
   
			return {
   
				goodsDetails:[
					{
   id:222,color:'#CCCCFF'},
					{
   id:223,color:'#FFCCCC'},
					{
   id:224,color:'#99CC99'},
					{
   id:225,color: