废话不多说，先上样板图
代码就先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.jsPage({data: {last_index: 0,//上一回滚动的位置amplification_index: 0,//轮盘的当前滚动位置roll_flag: true,//是否允许滚动max_number: 8,//轮盘的全部数量speed: 300,//速度，速度值越大，则越慢 初始化为300finalindex: 5,//最终的奖励距离当前的位置！不是最后的几等奖！myInterval: "",//定时器max_speed: 40,//滚盘的最大速度minturns: 8,//最小的圈数为2runs_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;}
