1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序抽奖 简单功能实现

微信小程序抽奖 简单功能实现

时间:2019-08-06 08:55:47

相关推荐

微信小程序抽奖 简单功能实现

抽奖是一种常见的互动活动,在微信小程序中也有很多不同的实现方式。以下是一份简单的微信小程序抽奖源码,供参考:在 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)

实现了一个简单的地奖功能,用户点击“开始抽奖“按知后,抽奖结里会从奖品列表中贿机选取并不断滚动,最终停止时显示中奖结果,并弹出模态框展示中奖结果。您可以根据实际需求进行修改和扩展。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。