uni、vue盲盒抽奖

这个功能当时用css动画做过，但是结果并不是太理想，所以我想到了用轮播图来实现。

很简单，直接上代码！

HTML布局

<view class="home">
	<swiper class="swiper"
             // 这里面的属性看下文档，里面都有
             :autoplay="value" //给autoplay一个变量
             circular
             disable-touch="false"
             :interval="100">

			    <!-- v-for循环遍历你要展示的数组 -->
			    <swiper-item v-for="(item, index) in data" :key="index">
			             <view class="item">{{ item.name }}</view>
				 </swiper-item>

	</swiper>
</view>
<button @click="openBoxClick">停止</button>
<button @click="BoxClick">开始</button>

JS

data() {
	return {
        // 默认为true
		value: true,
		data: [
			{ id: 1, name: 1 },
			{ id: 2, name: 2 },
			{ id: 3, name: 3 },
			{ id: 4, name: 4 },
			{ id: 5, name: 5 },
			{ id: 6, name: 6 },
			{ id: 7, name: 7 },
			{ id: 8, name: 8 },
			{ id: 9, name: 9 },
			{ id: 10, name: 10 }
		]
	};
},
methods: {
    // 点击按钮来改变autoplay的值
	openBoxClick() {
		this.value = false;
	},
	BoxClick() {
		this.value = true;
			
	}
}

CSS

.home {
	.swiper {
		width: 100%;
		background-color: black;
		/deep/.uni-swiper-slide-frame {
			width: 50% !important;
			left: -78px !important;
			.item {
				width: 176px;
				height: 149px;
				background-color: red;
				font-size: 20px;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}

看效果图

 写成自动的话就给  this.value   这个赋值操作时候添加定时器即可。

总的来说用轮播图来写要比css动画简单多。