这次继续分享第二个抽奖组件，参考了网上多个版本，本人根据实际工作中进行了一些优化，并将其做成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、具体代码片段

地址： https://developers.weixin.qq.com/s/a5NiCwms7gpI

建议将IDE工具升级到 1.03.24以上，避免一些BUG

如有疑问请留言~

觉得有用，请点个赞哦，让我继续分享更有动力~