废话不多说,先上样板图
代码就先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;}