uni盲盒抽奖

之前试过很多方法来写这个盲盒抽奖动画，之前也发过一个，但是都不太理想。现在实现这个还不错，唯一一点就是要对请求回来的数组进行一个处理。

现在用的方法是uni中的轮播图来实现的。我之前也试过轮播图这种写法，但是呢最后每次停止的时候展示的内容不一样。之前一直在用定时器来控制动画开始与停止，后来无意之间发现了change事件。

这个是css设置的样式，你们可以根据我这新开个页面去测试一下。

这里面的属性在文档里面都是有的。 

我这种做法需要处理一下展示的数组长度。

let list = this.data;
let listLength = list.length;
let num = 202 - listLength;
if (num > 0) {
    let j = 0;
	for (let i = 0; i < num; i++) {
		list = list.concat(list[j]);
		j++;
		if (j == listLength) {
	    	j = 0;
		}
	}
	this.newList = list;
} else {
	this.newList = list.splice(0, 202);
}

这个处理数组长度方法也发表过文章，如果不懂可以看一下。

轮播图里面有个 ‘ current ’ 值，代表的是当前指示索引，必须是通过 swiper 的 change 事件获取到的 e.detail.current

change(e) {
	this.current = e.detail.current;
    // 打印后结果是轮播图当前的索引值
	console.log(this.current);
}

我们想让这个动画停止就用这个索引值来搞事情。

我们把轮播图组件的autoplay属性设置成动态值 :autoplay="value" ，autoplay属性有两个值，true和false

在change事件里来控制autoplay属性

change(e) {
	this.current = e.detail.current;
    if(this.current == this.newList-1){
        this.value = false
    }
}

这里要注意，数组长度要 - 1，这里意思就是如果轮播图当前索引等于数组长度减1时候，让轮播图的autoplay属性等于false，也就是 让value等于false。

这样轮播图就会在最后一个索引的时候停止动画。

我们这里呢在动画开始之前就把你要展示的内容做处理，用splice来替换

this.newList.splice(0, 1, '要替换的对象');

单抽的抽奖动画就是这样。

如果是五连抽的话呢，在change事件里面加定时器就可以了，根据各自要求的动画时长来 设置 case 的值最后在在数组对应的下标替换想要展示的内容即可。代码如下

change(e) {
	this.current = e.detail.current;
	switch (this.current) {
		case 40:
			this.value = false;
			setTimeout(() => {
    			this.value = true;
			}, 2000);
		break;
		case 80:
			this.value = false;
			setTimeout(() => {
				this.value = true;
			}, 2000);
		break;
		case 120:
			this.value = false;
			setTimeout(() => {
				this.value = true;
			}, 2000);
		break;
		case 160:
			this.value = false;
			setTimeout(() => {
				this.value = true;
			}, 2000);
		break;
		case 200:
			this.value = false;
			setTimeout(() => {
				this.value = true;
			}, 2000);
		break;
	}
}

我这里用的 switch 语句，看着比较简洁方便。

总的来说很简单，之前一直想着用css动画来实现这个功能，实现呢倒也是实现了就是每次动画停止所展示的内容不居中就很难受。用轮播图的话人家都是写好的，而且也不用过多考虑移动端适配的问题！如果有什么更好的方法欢迎评论！！！