微信小程序实现简单九宫格抽奖
本文实例为大家分享了微信小程序实现简单九宫格抽奖的具体代码,供大家参考,具体内容如下
废话不多说,先上样板图
代码就先wxml文件:
<view id="container"> <!--左上--> <view id="li" class='{{amplification_index===1?"indexli":""}}'> 一等奖 <view></view> </view> <!--上--> <view id="li" class='{{amplification_index===2?"indexli":""}}'> 二等奖 <view></view> </view> <!--右上--> <view id="li" class='{{amplification_index===3?"indexli":""}}'> 三等奖 <view></view> </view> <!--左--> <view id="li" class='{{amplification_index===8?"indexli":""}}'> 八等奖 <view></view> </view> <!--开始--> <a bindtap="startrolling"> 开始抽奖 </a> <!--右--> <view id="li" class='{{amplification_index===4?"indexli":""}}'> 四等奖 <view></view> </view> <!--左下--> <view id="li" class='{{amplification_index===7?"indexli":""}}'> 七等奖 <view></view> </view> <!--下--> <view id="li" class='{{amplification_index===6?"indexli":""}}'> 六等奖 <view></view> </view> <!--右下--> <view id="li" class='{{amplification_index===5?"indexli":""}}'> 五等奖 <view></view> </view> <p id="pp"></p> </view>
wxss文件:
#container { width: 750rpx; height: 750rpx; } #li, a { background: #fff; margin: 20rpx; border: 1px solid #000000; width: 210rpx; height: 210rpx; box-sizing: border-box; display: block; float: left; text-align: center; line-height: 100px; position: relative; border-radius: 5rpx; } a:hover { cursor: pointer; color: orange; font-size: 18px; } .active { background: red; color: #fff; } #pp { line-height: 32px; color: #9a9a9a; text-align: center; } page view .indexli { width: 210rpx; height: 210rpx; margin-top: 0rpx; margin-left: 0rpx; margin-bottom: 0rpx; margin-right: 0rpx; box-sizing: border-box; } .indexli view { position: absolute; width: 190rpx; height: 190rpx; background: #000000; opacity: 0.3; left: 0; top: 0; border:10rpx solid blue; } a { position: relative; } a image { width: 100%; height: 100%; border-radius: 5rpx; } a view { width: 80rpx; height: 80rpx; position: absolute; font-size: 40rpx; color: #fff; font-weight: 700; line-height: 40rpx; margin-left: -40rpx; margin-top: -40rpx; left: 50%; top: 50%; } .c_title { width: 100%; text-align: center; color: #fff; font-size: 20rpx; padding-top: 30rpx; } .c_title2 { color: #fff; text-align: center; font-size: 40rpx; } .c_title3 { background: red; width: 250rpx; margin-left: 250rpx; height: 40rpx; line-height: 40rpx; color: #fff; font-size: 20rpx; text-align: center; } .c_titlr4 { background: gold; color: red; width: 400rpx; border-radius: 500rpx; text-align: center; font-size: 20rpx; margin-left: 175rpx; margin-top: 10rpx; } .b1 { margin-left: 20rpx;
js文件
// pages/Lottery/Lottery.js Page({ data: { last_index: 0,//上一回滚动的位置 amplification_index: 0,//轮盘的当前滚动位置 roll_flag: true,//是否允许滚动 max_number: 8,//轮盘的全部数量 speed: 300,//速度,速度值越大,则越慢 初始化为300 finalindex: 5,//最终的奖励距离当前的位置!不是最后的几等奖! myInterval: "",//定时器 max_speed: 40,//滚盘的最大速度 minturns: 8,//最小的圈数为2 runs_now: 0//当前已跑步数 }, //开始滚动 startrolling: function () { let _this = this; //初始化步数 _this.data.runs_now = 0; //当前可以点击的状态下 if (_this.data.roll_flag) { _this.data.roll_flag = false; //启动滚盘,注,若是最终后台无返回就不好意思里 _this.rolling(); } }, onShow: function () { this.data.min_height = getApp().globalData.windowheight; this.setData(this.data); }, //滚动轮盘的动画效果 rolling: function (amplification_index) { var _this = this; this.data.myInterval = setTimeout(function () { _this.rolling(); }, this.data.speed); this.data.runs_now++;//已经跑步数加一 this.data.amplification_index++;//当前的加一 //获取总步数,接口延迟问题,所以最后还是设置成1s以上 var count_num = this.data.minturns * this.data.max_number + this.data.finalindex - this.data.last_index; //上升期间 if (this.data.runs_now <= (count_num / 3) * 2) { this.data.speed -= 30;//加速 if (this.data.speed <= this.data.max_speed) { this.data.speed = this.data.max_speed;//最高速度为40; } } //抽奖结束 else if (this.data.runs_now >= count_num) { clearInterval(this.data.myInterval); this.data.roll_flag = true; } //下降期间 else if (count_num - this.data.runs_now <= 10) { this.data.speed += 20; } //缓冲区间 else { this.data.speed += 10; if (this.data.speed >= 100) { this.data.speed = 100;//最低速度为100; } } if (this.data.amplification_index > this.data.max_number) {//判定!是否大于最大数 this.data.amplification_index = 1; } this.setData(this.data); } })
样式
color: #fff; font-size: 40rpx;} .b2 { margin-left: 20rpx; color: #fff; font-size: 25rpx;} .b3 { margin-left: 20rpx; color: #fff; font-size: 25rpx;} .b4 { margin-left: 20rpx; color: #fff; font-size: 25rpx;} .b5 { margin-left: 20rpx; color: #fff; font-size: 25rpx;}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)