uni-app 横屏滚动抽奖

最新推荐文章于 2024-05-08 15:32:14 发布

dreamimport

最新推荐文章于 2024-05-08 15:32:14 发布

阅读量1k

点赞数

分类专栏：开发项目文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/dreamimport/article/details/127537237

版权

【代码】uni-app 横屏滚动抽奖。

摘要由CSDN通过智能技术生成

横屏滚动抽奖

模拟效果
在这里插入图片描述
代码：

<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: