今天突然要做一个竖直滚动老虎机，可以设置中奖位置，以及中奖回调，然后再带点常规的滚动动画，还是有点意思，和之前的转盘抽奖有点类似，有兴趣可以看下。
简单分析下
UI，ui的话，就简单点，三个列表从下往上滚动，搞个框罩住 css的活，应该简单。 动画，老规矩，我们采用之前的方案，动态设置 css，可以搞定。 设置中奖位置，我们可以想传递一个数组，类似 [1,2,3] 这样，数组每一项代表停留位置，那我们就可以计算得css应该平移的距离值，至于动画结束后，还是参照以前的，监听动画结束就可以了。
先看看效果
html
<div class="lhj_box" >
// 这里直接 搞三组
<div class="lhj_item" v-for="ite in 3" :key="ite" >
// ref 标识，到时候获取，用于计算高度
<ul :class="`lhj_ul_${ite}`" ref="ul" >
<li v-for="(item,index) in img" :key="index" >
<img :src="require(`../assets/images/l_gift${item}.png`)" alt="">
</li>
</ul>
</div>
</div>js部分
let UL_BOXS = []
export default {
name:'lhj',
data() {
return {
img: [],
liHeight: 0,
arr: [4,5,4],//中奖数组
}
},
created() {
this.setArr()
},
async mounted() {
let evenTransition = this.whichTransitionEvent()
await this.$nextTick()
// 获取 ul 3个 box
UL_BOXS = this.$refs.ul
// 计算每个 图片高度
let ulH = UL_BOXS[0].offsetHeight
// 我自己默认循环的 50个图片
this.liHeight = ulH / 50
// 监听动画结束函数
UL_BOXS[2].addEventListener(evenTransition,rest,false)
let that = this
// 复位函数
function rest() {
for(let i = 0;i < that.arr.length;i++){
let y = (that.arr[i] - 1) * that.liHeight
that.aniImg(y,i,0)
}
alert('中奖下标'+JSON.stringify(that.arr))
}
},
beforeDestroy() {
UL_BOXS = null
},
methods: {
async toStart() {
// 圈数
let loop = 3
// 一圈基础高度 奖品数*每个高度
let base = 5*this.liHeight
for(let i = 0;i < this.arr.length; i++){
let a = await this.delayPerform(i*100)
if( a == 1){
let y = 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() {
let arr = [1,2,3,4,5]
let img2 = []
for(let i = 0 ;i<10;i++){
img2.push(...arr)
}
this.img = Object.freeze(img2)
},
// 改变中奖位置
toChang() {
this.arr = [1,1,1]
},
// 延时函数
delayPerform(delay = 200) {
return new Promise((resolve,reject) => {
setTimeout(()=>{
resolve(1)
},delay)
})
},
// 动画兼容
whichTransitionEvent(){
let el = document.createElement('span'),
transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
};
for(let t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
el = null;
}
}
}
</script>js部分主要做了几件事
- 我采用的是将列表循环多组出来，然后平移整个ul列表的方式来，所以先写一个重复数组的函数。
- 获取最后一个ul，并给其绑定监听动画结束的事件，中间当然也包括了计算每个滚动块的高度，方便后面计算停留位置。
- 编写一个延时函数，用来控制三个 ul 依次滚动，也会计算一些滚动的基本圈数。
- 动画结束，滚动距离复位。
总结
功能是实现了，具体完善的还是比较多，比如 事件的解绑，编写组件可以动态设置基本圈数，动画时间等。
到此这篇关于VUE 实现一个简易老虎机的项目实践的文章就介绍到这了,更多相关VUE 老虎机内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
