抽奖是一种常见的互动活动,在微信小程序中也有很多不同的实现方式。以下是一份简单的微信小程序抽奖源码,供参考:在 wxml 文件中添加抽奖的页面布局:
<view class="content">
<view class="title">点击抽奖</view>
<button class="btn" bindtap="startLottery">开始抽奖</button>
<view class="result">{{result}}</view>
</view>
在js 文件中添加抽奖逻辑:文章来源:https://www.toymoban.com/news/detail-595137.html
Page ({
data: {
prizeList: ['一等奖' ,'二等奖','三等奖','鼓励奖'],//奖品列表
result: '',//中奖结果
isStart: false,//是否正在抽奖
},
startLottery: function () {
if (this.data.isStart) {
return
}
this.setData({
isStart: true,
})
let curIndex = 0
let maxIndex = this.data.prizeList.length-1
let timer = setInterval(() =>{
curIndex = curIndex == maxIndex ? 0 : curIndex + 1
this.setData({
result: this.data.prizeList[curIndex],
})
},50)
setTimeout(() =>{
clearInterval(timer)
this.setData({
isStart: false,
})
wx.showModal ({
title:,中奖结果!
content: this.data.result,
showCancel: false,
})
},3000)
实现了一个简单的地奖功能,用户点击“开始抽奖“按知后,抽奖结里会从奖品列表中贿机选取并不断滚动,最终停止时显示中奖结果,并弹出模态框展示中奖结果。您可以根据实际需求进行修改和扩展。文章来源地址https://www.toymoban.com/news/detail-595137.html
到了这里,关于微信小程序抽奖 简单功能实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!