抽奖是一种常见的互动活动,在微信小程序中也有很多不同的实现方式。以下是一份简单的微信小程序抽奖源码,供参考:在 wxml 文件中添加抽奖的页面布局:
<view class="content"><view class="title">点击抽奖</view><button class="btn" bindtap="startLottery">开始抽奖</button><view class="result">{{result}}</view></view>
在js 文件中添加抽奖逻辑:
Page ({data: {prizeList: ['一等奖' ,'二等奖','三等奖','鼓励奖'],//奖品列表result: '',//中奖结果isStart: false,//是否正在抽奖},startLottery: function () {if (this.data.isStart) {return}this.setData({isStart: true,})let curIndex = 0let maxIndex = this.data.prizeList.length-1let timer = setInterval(() =>{curIndex = curIndex == maxIndex ? 0 : curIndex + 1this.setData({result: this.data.prizelist[curIndex],})},50)setTimeout(() =>{clearInterval(timer)this.setData({isStart: false,})wx.showModal ({title:,中奖结果!content: this.data.result,showCancel: false,})},3000)
实现了一个简单的地奖功能,用户点击“开始抽奖“按知后,抽奖结里会从奖品列表中贿机选取并不断滚动,最终停止时显示中奖结果,并弹出模态框展示中奖结果。您可以根据实际需求进行修改和扩展。