html
<divclass="lhj_box">
//这里直接搞三组
<divclass="lhj_item"v-for="itein3":key="ite">
//ref标识,到时候获取,用于计算高度
<ul:class="`lhj_ul_${ite}`"ref="ul">
<liv-for="(item,index)inimg":key="index">
<img:src="require(`../assets/images/l_gift${item}.png`)"alt="">
</li>
</ul>
</div>
</div>
js部分
/**
*金额依次为1.11.21.31.41.5
***/
letUL_BOXS=[]
exportdefault{
name:'lhj',
data(){
return{
img:[],
liHeight:0,
arr:[4,5,4],//中奖数组
}
},
created(){
this.setArr()
},
asyncmounted(){
letevenTransition=this.whichTransitionEvent()
awaitthis.$nextTick()
//获取ul3个box
UL_BOXS=this.$refs.ul
//计算每个图片高度
letulH=UL_BOXS[0].offsetHeight
//我自己默认循环的50个图片
this.liHeight=ulH/50
//监听动画结束函数
UL_BOXS[2].addEventListener(evenTransition,rest,false)
letthat=this
//复位函数
functionrest(){
for(leti=0;i<that.arr.length;i++){
lety=(that.arr[i]-1)*that.liHeight
that.aniImg(y,i,0)
}
alert('中奖下标'+JSON.stringify(that.arr))
}
},
beforeDestroy(){
UL_BOXS=null
},
methods:{
asynctoStart(){
//圈数
letloop=3
//一圈基础高度奖品数*每个高度
letbase=5*this.liHeight
for(leti=0;i<this.arr.length;i++){
leta=awaitthis.delayPerform(i*100)
if(a==1){
lety=base*loop+(this.arr[i]-1)*this.liHeight
this.aniImg(y,i)
}
}
},
//目标位置
aniImg(y,index,duration=3000){
UL_BOXS[index].style.transitionDuration=`${duration}ms`
UL_BOXS[index].style.transform=`translate(0px,-${y}px)translateZ(0px)`
},
//设置重复数组
setArr(){
letarr=[1,2,3,4,5]
letimg2=[]
for(leti=0;i<10;i++){
img2.push(...arr)
}
this.img=Object.freeze(img2)
},
//改变中奖位置
toChang(){
this.arr=[1,1,1]
},
//延时函数
delayPerform(delay=200){
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve(1)
},delay)
})
},
//动画兼容
whichTransitionEvent(){
letel=document.createElement('span'),
transitions={
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
};
for(lettintransitions){
if(el.style[t]!==undefined){
returntransitions[t];
}
}
el=null;
}
}
}
</script>
|