微信小程序六宫格抽奖

用微信小程序做一个抽奖活动

一轮是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; //抽奖过程KEYthis.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;
}

一个简单的抽奖就完成了

微信小程序六宫格抽奖相关推荐

微信小程序多宫格抽奖
最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢首先看效果思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然 ...
[微信小程序专题] 宫格导航设计
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题在很多APP软件,都会设置宫格导航,那么是如何设计的呢? ...
微信小程序 9宫格翻牌动画
9宫格翻牌需求: 1.进来时平铺9个格子显示 2.点击开始抽奖时洗牌动作 3.洗完牌后呈现9个都是未翻牌的状态 4.点击任意一个牌子,有翻转的动作 5.翻转结束后出现中奖的弹窗 555,当时真的一点一 ...
vue 图片宫格_微信小程序多宫格/九宫格抽奖基于vue来写
/*整体布局采用定位实现 gameBox:父盒子,最外层背景图 bg1:灰色灯 bg2:点击开始按钮后,白色灯出现,同时要每个500s同bg1做切换隐藏显示 start:按钮样式 item1-8:通过 ...
微信小程序实现大转盘抽奖----踩坑之路
微信小程序实现大转盘抽奖----踩坑之路需求:现在有一个小程序抽奖页面如下,此类抽奖方式为大转盘思路:由服务端获取抽奖次数和奖品,根据服务端的中奖概率来决定是否中奖,最后利用小程序动画将转盘转起来 ...
微信小程序六（数据请求表单的创建提交与接收）
好了开始正题了,本节小小研究了下微信小程序的表单创建与提交先看看效果 1. 表单页面 <view id="adduser"><form bindsubmit ...
微信小程序制作一个老虎机抽奖动画
可以把随机数换成后端传递的数据控制抽奖结果效果图: 动图有点卡- wxml <view class="content relative"><view class ...
微信小程序实现单元格编辑功能，并支持计算合计
最近有个客户想做下单系统,要求像电脑端一样 ,实现在多维的录入功能,客户主要是人事鞋批发的,要求颜色.尺码对应订购数量,可以计算横向和纵向合计,话不多说,直接上代码. 效果如下: 如上图,除了第一行和 ...
微信小程序合并单元格
https://blog.csdn.net/weixin_34355715/article/details/87962188

微信小程序六宫格抽奖

微信小程序六宫格抽奖相关推荐

最新文章

热门文章