这次继续分享第二个抽奖组件，参考了网上多个版本，本人根据实际工作中进行了一些优化，并将其做成component组件方便大家食用~
1、现在上吃的，呸，上代码
页面引用部分：
<!-- 数据是根据外部配置的，同时也修改组件自定义callback返回内容 -->
<LuckComponent lucks-data="{{lucksData}}" bind:callBack="luckCb"></LuckComponent>
<view class="roll">当前抽奖结果index：{{luck_num}}</view>
Page({
data: {},
onLoad() {
//在这里配置显示数据，未来还能添加图片等等
let lucksData = [{ //这里修改后，可以通过后台请求配置
"key": "baofu",
"name": "暴富",
"indexli": 1
}...];
this.setData({
lucksData
})
},
/**
* 结果回调函数
* @param {*} e
*/
luckCb(e){
console.log(e);
if(e.detail){
this.setData({
luck_num:e.detail
})
}
}
})
Component组件部分
<view class="luck_box">
<view class="luck">
<view class='li {{amplification_index===item.indexli?"indexli":""}}' wx:key="item" wx:for="{{lucksData}}">
<!-- 开始 -->
<view bindtap="startrolling" class="startrolling" wx:if="{{item.indexli === -1}}">
<view class="st1">抽奖</view>
</view>
<block wx:if="{{item.indexli !== -1}}">
<view class="setup_title">
<view class="txt">{{item.name}}</view>
<view class="index">当前index：{{item.indexli}}</view>
<view wx:if="{{item.parentsClass}}" class="^parentsClass">{{item.parentsClass}}</view>
</view>
<view class="indexli_view"></view>
</block>
</view>
</view>
</view>
Component({
/**
* 组件的属性列表
*/
properties: {
lucksData: {
type: Array,
value: []
},
},
/**
* 组件的初始数据
*/
data: {
amplification_index: 0, //轮盘的当前滚动位置
roll_flag: true, //是否允许滚动
max_number: 8, //轮盘的全部数量
speed: 300, //速度，速度值越大，则越慢 初始化为300
myInterval: "", //定时器
max_speed: 40, //滚盘的最大速度
minturns: 8, //最小的圈数为2
runs_now: 0, //当前已跑步数
luck_num: 0, // 中奖位置！！！！！！！！！！！！！！！！！！！！！！！！！
end_amp: 0, //上一次滚动的位置
start_flag: true,
lucksData: [], //这里是渲染数据
},
/**
* 组件的方法列表
*/
methods: {
//开始滚动
startrolling: function () {
let _this = this;
//roll点
let random = parseInt(Math.random() * 8 + 1);
if (this.data.start_flag == true) {
_this.setData({
luck_num: random,
start_flag: false
})
//初始化步数
_this.data.runs_now = 0;
//当前可以点击的状态下
if (_this.data.roll_flag) {
_this.data.roll_flag = false;
//启动滚盘，
_this.rolling();
}
};
//回调行数，把结果传出去
this.triggerEvent('callBack', random);
},
//滚动轮盘的动画效果
rolling: function (amplification_index) {
let _this = this;
this.data.myInterval = setTimeout(function () {
_this.rolling();
}, this.data.speed);
this.data.runs_now++; //已经跑步数加一
this.data.amplification_index++; //当前的加一
//获取总步数，接口延迟问题，所以最后还是设置成1s以上
let 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);
},
}
})
2、食用指南
- 可以通过
<slot>、^class和~class等方法外部配置组件的样式，使其能在多个地方复用 - 如果还想配置如起始点，速度等，可以统一通过option传参的方式，二次开发下这个组件。
- 可以通过修改组件让callback返回更多参数
3、具体代码片段
地址： developers.weixin.qq.com/s/a5NiCwms7…
建议将IDE工具升级到 1.03.24以上，避免一些BUG
