太長了，巧妙地優(yōu)化了跑馬燈
前言
上周優(yōu)化了個跑馬燈，原因是跑馬燈的長度太長了，每個item的節(jié)點(diǎn)比較多，所以即使限制最多只有50個item，也還是很長很長，有多長可以看看下面
怎么優(yōu)化呢？看看之前的跑馬燈。
優(yōu)化前的寫法
之前的寫法很簡單，其實(shí)就是讓很長很長的class="animate"的div在lottery-person-wrapper中滾動。用的是css 中的animation屬性。
用animation雖然好，但是不能控制跑馬燈的長度，即我不想讓50個item一起滾動，最好是讓只需要出現(xiàn)在屏幕中的item滾動就好了。于是就將滾動改成了item為絕對定位，然后利用transform來改變位置，然后利用transition來實(shí)現(xiàn)動畫的過渡。
優(yōu)化后的寫法
可以看到?jīng)]有那么多的item節(jié)點(diǎn)了，這是怎么辦到的呢？
- 首先獲取lottery-person-wrapper的寬度。
this.animationWrapperWidth = this.$refs.animateWrapper.clientWidth;
- 然后再讓一個item出現(xiàn)在跑馬燈中。
mounted() {
this.$nextTick(() => {
this.animationWrapperWidth = this.$refs.animateWrapper.clientWidth;
this.emitItem();
});
}
- 看看emit是怎么寫的。
首先需要知道：
- swiperUserList是從接口獲取到的列表。
- swiperUserListShow是在template中遍歷的列表。
我們先拿出swiperUserList中的第一個item，然后再把item放入swiperUserList的尾部，讓swiperUserList始終保持50個item。
然后，再把這個item深拷貝放入到swiperUserListShow中，為什么要深拷貝是因?yàn)椋幌Ｍ鹲wiperUserListShow的item與swiperUserList中的item出現(xiàn)引用的關(guān)系，否則會十分混亂。
給每一個item添加了一個id是為了作為遍歷時獨(dú)一無二的key。
接下來則是要獲取該item的寬度clientWidth，然后計(jì)算出該item的尾部出現(xiàn)的時間endShowTime，以及該item完全走完消失的時間disappearTime。
在該item尾部出現(xiàn)的時候，就讓下一個item push到swiperUserListShow中，使其出現(xiàn)在跑馬燈中，在該item完全跑完消失的時候就讓這個item從swiperUserListShow中剔除。
emitItem() {
if (!this.isShow) {
return;
}
let swiperUser = this.swiperUserList.shift();
this.swiperUserList.push(swiperUser);
this.swiperUserListShow.push(
Object.assign({}, { ...swiperUser, id: this.swiperId })
);
this.swiperId += 1;
this.$nextTick(() => {
let elm = this.$refs.swiperUserList[this.swiperUserListShow.length - 1];
let elmWidth = elm.clientWidth || 0;
let disappearTime = (elmWidth + this.animationWrapperWidth) / 60;
let endShowTime = elmWidth / 60;
let moveItem =
this.swiperUserListShow[this.swiperUserListShow.length - 1];
elm.style.transition = `transform ${disappearTime}s linear`;
elm.style.transform = 'translate(-100%,-50%)';
// this.clearTimer(moveItem)
moveItem.endShowTimer = window.setTimeout(() => {
clearTimeout(moveItem.endShowTimer);
moveItem.endShowTimer = null;
this.emitItem();
}, endShowTime * 1000);
moveItem.disappearTimer = window.setTimeout(() => {
clearTimeout(moveItem.disappearTimer);
moveItem.disappearTimer = null;
this.swiperUserListShow.shift();
}, disappearTime * 1000);
});
},
基本上就已經(jīng)實(shí)現(xiàn)了。
為什么說是基本？
因?yàn)橛袃蓚€坑。
看看坑
第一個是我們用了setTimeout，在我們將頁面切到后臺的時候，setTimeout里的代碼是掛起的，不會執(zhí)行，但是頁面上的動畫還是會繼續(xù)執(zhí)行的。
elm.style.transition = `transform ${disappearTime}s linear`;
elm.style.transform = 'translate(-100%,-50%)';
所以，為了解決這個bug，需要監(jiān)聽是否切出切入后臺，切到后臺則清除所有setTimeout和清空swiperUserListShow列表，切回頁面，再重新執(zhí)行emitItem。
mounted() {
this.$nextTick(() => {
this.animationWrapperWidth = this.$refs.animateWrapper.clientWidth;
this.emitItem();
});
// 處理退出前臺，跑馬燈還在跑的問題，隱藏就是直接清空展示列表
document.addEventListener('visibilitychange', () => {
const isShow = document.visibilityState === 'visible'
this.handleSwiperListShow(isShow);
});
}
methods: {
// 處理跑馬燈展示列表和清除計(jì)時器
handleSwiperListShow(isShow) {
if (isShow) {
this.emitItem();
} else {
this.swiperUserListShow.forEach((item) => {
clearTimeout(item.endShowTimer);
clearTimeout(item.disappearTimer);
});
this.swiperUserListShow = [];
}
},
}
第二個坑是我們使用了clientWidth來獲取item的寬度，當(dāng)我們頁面中有tab的時候，并且跑馬燈在某個tab下，然后當(dāng)前v-show是激活的是其他tab，則會導(dǎo)致跑馬燈被隱藏，則獲取不到item的寬度，這時的clientWidth的值為0.導(dǎo)致計(jì)算出來的endShowTime的值為0，則會導(dǎo)致瘋狂執(zhí)行settimeout里面的內(nèi)容。
為了解決這個bug則需要在父組件中傳入isShow來判斷跑馬燈這個頁面是否被隱藏。
props: {
isShow: {
type: Boolean,
default: false
},
}
然后監(jiān)聽isShow。
watch: {
// 處理tab選項(xiàng)卡隱藏抽獎模塊，獲取不到item clientWith的問題，隱藏就是直接清空展示列表
isShow(newVal, oldVal) {
this.handleSwiperListShow(newVal)
}
},
至此，優(yōu)化過程就到此完美結(jié)束了。
其實(shí)還有個比較簡單的優(yōu)化方法，但是不適用于我這個場景，但是也分享一下。
就是依然使用css的animation動畫屬性，然后使用animationEnd的監(jiān)聽事件。
其他優(yōu)化方案
當(dāng)監(jiān)聽到結(jié)束的時候，利用v-if把當(dāng)前跑馬燈銷毀，然后就往swiperUserListShow中push兩個item，再生成展示跑馬燈，又實(shí)現(xiàn)animation動畫，這樣是一個實(shí)現(xiàn)起來十分方便的方案，但是由于同一時刻只有我們push的item數(shù)，而且需要跑完才繼續(xù)展示下兩個，會留下一片空白，就有的不連貫的感覺，所以不使用這種方案。
