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,//当前已跑步数 luck_num: 3, //获得的奖项的位置 end_amp:0, //上一次滚动的位置 start_flag:true, lucks: ['积分+5', '谢谢参与', '积分+10', '谢谢参与', '50元卡券', '100元卡券', '谢谢参与', '积分+20'], }, //开始滚动 startrolling: function () { let _this = this; if (this.data.start_flag==true){ _this.setData({ start_flag: false }) //初始化步数 _this.data.runs_now = 0; //当前可以点击的状态下 if (_this.data.roll_flag) { _this.data.roll_flag = false; //启动滚盘， _this.rolling(); } } },//滚动轮盘的动画效果 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; var count_num = this.data.minturns * this.data.max_number + this.data.luck_num - this.data.end_amp; //上升期间 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; this.setData({ end_amp: _this.data.amplification_index, start_flag: true }) if (_this.data.is_selected==0){ wx.showModal({ title: '很遗憾', content: _this.data.prize_name, showCancel: false, success(res) { } }) } else if (_this.data.is_selected == 1){ wx.showModal({ title: '恭喜您', content: _this.data.prize_name, showCancel: false, success(res) { } }) } } //下降期间 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); },})
wxml
<view class="luck_box"> <image src="../../static/images/images/29luck_07.png"></image> <view class="luck"> <!--左上--> <view id="li" class='{{amplification_index===7?"indexli":""}}' > <view class="setup_title" >谢谢参与</view> <view class="indexli_view"></view> </view> <!--上--> <view id="li" class='{{amplification_index===7?"indexli":""}}' > <view class="setup_title" >谢谢参与</view> <view class="indexli_view"></view> </view> <!--右上--> <view id="li" class='{{amplification_index===7?"indexli":""}}' > <view class="setup_title" >谢谢参与</view> <view class="indexli_view"></view> </view> <!--左--> <view id="li" class='{{amplification_index===7?"indexli":""}}' > <view class="setup_title" >谢谢参与</view> <view class="indexli_view"></view> </view> <!--开始--> <view bindtap="startrolling" class="startrolling" > <text>立即</text> <text class="st1">抽奖</text> </view> <!--右--> <view id="li" class='{{amplification_index===7?"indexli":""}}' > <view class="setup_title" >谢谢参与</view> <view class="indexli_view"></view> </view> <!--左下--> <view id="li" class='{{amplification_index===7?"indexli":""}}' > <view class="setup_title" >谢谢参与</view> <view class="indexli_view"></view> </view> <!--下--> <view id="li" class='{{amplification_index===7?"indexli":""}}' > <view class="setup_title" >谢谢参与</view> <view class="indexli_view"></view> </view> <!--右下--> <view id="li" class='{{amplification_index===7?"indexli":""}}' > <view class="setup_title" >谢谢参与</view> <view class="indexli_view"></view> </view> <p id="pp"></p> </view> </view>
wxss
.luck_box{ width:586rpx; height:582rpx; margin:auto; /* margin-top:38rpx; */ border-radius: 10rpx; overflow: hidden; box-shadow: 0rpx 5rpx 20rpx #c73c34; position: absolute; left:0;right:0;top:8vh;}.luck_box>image{ display: block; width:100%; height:100%;}.luck_box>.luck{ width:550rpx; height:550rpx; position: absolute; top:0; left:0; bottom:0; right:0; margin:auto;} .luck_box>.luck #li{ background: #fff; margin-left:16rpx; margin-top:16rpx; width: 162rpx; height:162rpx; box-sizing: border-box; display: block; float: left; text-align: center; line-height: 162rpx; position: relative; border-radius: 10rpx; font-size: 28rpx; color: #d04011;}.luck_box>.luck #li>.setup_title{ width: 162rpx; height:162rpx; text-align: center; line-height: 162rpx; border-radius: 10rpx; font-size: 28rpx; color: #d04011; position: absolute; top:0;left:0;right:0;bottom:0;margin:auto;}.luck_box>.luck #li>.setup_img{ display: block; width: 162rpx; height:162rpx; margin:auto; border-radius: 10rpx;}.startrolling{ background: #fff; margin-left:16rpx; margin-top:16rpx; width: 142rpx; height:142rpx; display: block; float: left; text-align: center; line-height: 142rpx; position: relative; border-radius: 10rpx; font-size: 26rpx; color: #fff; background: #fc4e40; border:10rpx solid #fc7366;}.startrolling>text{ display: block; width:100%; height:38rpx; text-align: center; line-height:38rpx; margin-top:30rpx; font-size: 36rpx; letter-spacing:6rpx;}.startrolling>.st1{ margin-top:6rpx;} #pp { line-height: 32px; color: #9a9a9a; text-align: center;} .indexli .indexli_view { position: absolute; width: 152rpx; height: 152rpx; background: rgba(255,255,255,0); left: -5rpx; top: -5rpx; border:10rpx solid #fbaa32; border-radius: 15rpx;} .luck_list{ margin:auto; width:660rpx; height:405rpx; background: #f86f66; border:1rpx solid #fbbab1; margin-top:70rpx; position: absolute; left:0;right:0; top:56.3vh;}.luck_list>image{ position: absolute; width:215rpx; height:62rpx; left:0; right:0; margin:auto; top:-30rpx;}
微信小程序
