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