用微信小程序做一个抽奖活动
一轮是6个红包,需要在第三轮听下转动,初始一个随机数在13-18之间随机来进行抽奖
//页面的渲染
<view class="container">
<!-- 抽奖区域 -->
<view class="box">
<view class="list-content">
<block wx:for="{{prizeList}}" wx:key="id">
<view class="list">
<view class="list_t">
//当转动开始后图片跟随当前的下标进行修改
<image src="{{drawIndex==item.index?changeImg:listImg}}" mode="aspectFit"></image>
</view>
<view class="list_b">{{item.prizeName}}</view>
</view>
</block>
</view>
</view>
<button bindtap="startDraw" style="background: #e66013;color: #fff;">抽奖</button>
<!-- 奖品弹窗 -->
<view class="award-display" wx:if="{{showModel}}" bindtap="closePopup">
<view class="award-image">
<image src="{{changeImg}}" mode="aspectFit"></image>
<view class="luck-text" style="color: #fff;">{{awardName}}</view>
</view>
</view>
</view>
页面的js
// 获取应用实例
let timer;
let drawIndex = 0; //抽奖过程下标
Component({
/**
* 组件的初始数据
*/
data: {
// 奖品参数信息
prizeList: [
{ index: 1, prizeName: '谢谢参与' },
{ index: 2, prizeName: '积分 x20' },
{ index: 3, prizeName: '积分 x5' },
{ index: 6, prizeName: '谢谢参与' },
{ index: 5, prizeName: '商务笔记本' },
{ index: 4, prizeName: '积分 x2' }
],
listImg:'https://img-blog.csdnimg.cn/9ec6866452694effb07ac91961cddd91.png',
changeImg:'https://img-blog.csdnimg.cn/10c950ac1d6c498fa3ffb8353e4c914c.png',
drawIndex: null, //抽奖过程
random:null, //随机数
prizeName: null, //抽奖结果下标对应的奖品名称
showModel: false, // 是否显示奖品弹窗,默认false不显示
awardName:'', // 弹窗显示的奖品名
time:0
},
/**
* 组件的方法列表
*/
methods: {
//抽奖操作
startDraw() {
var that =this;
this.againBtn();
this.data.drawIndex=0;
this.data.time=0;
clearInterval(timer);
timer = setInterval(()=>{
this.changePrize()
}, 150);
// 随机将品池
var random = Math.floor(Math.random() *(5)+13); //在13-18之间取随机数,因为是6个一轮所以第三轮刚好出结果
this.setData({
random:random
})
setTimeout(() => {
clearInterval(timer);
timer = setInterval(() => {
that.changePrize()
}, 500);
}, 1800)
},
//奖品切换
changePrize() {
drawIndex++;
var time =this.data.time;
time++;
drawIndex = drawIndex > 6 ? 1 : drawIndex;
this.setData({
time:time,
drawIndex: drawIndex
});
if (this.data.random == this.data.time) {
clearInterval(timer);
// 匹配抽到的数据
var data= this.data.prizeList.filter(function(item){
return item.index == drawIndex;
})
this.setData({
showModel: true,
awardName: data[0].prizeName
});
}
},
//点击再抽一次按钮
againBtn() {
drawIndex = 0; //抽奖过程KEY
this.setData({
drawIndex: null, // 清空当前商品下标
random:null,
awardName: '' // 清空奖品的展示名称
});
},
// 关闭弹窗
closePopup(){
this.setData({
showModel: false
})
}
}
})
抽奖的样式
.list{
text-align: center;
margin-bottom: 100rpx;
}
.list_t>image{
width: 200rpx;
height: 100rpx;
}
.list-content{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 20rpx;
}
.award-display{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, .7);
}
.award-image{
text-align: center;
color: #fff;
margin: 100rpx auto;
}
.award-image>image{
width: 300rpx;
height: 300rpx;
margin-bottom: 30rpx;
}
一个简单的抽奖就完成了