# uni-app swiper數量過多時卡頓優化方案，微信小程序swiper優化 #### 問題： swiper數量達到大約400+時候會出現明顯滑動卡頓，渲染慢的問題，達到1000+時候需要幾十秒時間，或者可能導致渲染失敗。 #### 解決方案： 配置`circular="true"`屬性開啟銜接滑動，即播放到末尾后重新回到開頭。然后固定用于展示的swiper-item只設置3個，當滑動時候去替換展示的數據。這種方法可以展示幾千萬的數據展示都沒問題。 作者：虎牙工務員劉波 鏈接：https://www.jianshu.com/p/9ff63e181447 來源：簡書 著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。 //頁面源碼 ~~~xml <template> <view class="content"> <view class="title">{{originIndex +1 }}/{{ originList.length }}</view> <swiper class="swiper" circular @change="swiperChange" swiperDuration="250"> <swiper-item v-for="(item, index) in displaySwiperList" :key="index"> <view class="wrap_content">{{ item }} </view> </swiper-item> </swiper> </view> </template> <script> export default { data() { return { originList: [], // 源數據 displaySwiperList: [], // swiper需要的數據 displayIndex: 0, // 用于顯示swiper的真正的下標數值只有：0，1，2。 originIndex: 0, // 記錄源數據的下標 }; }, methods: { /** * 初始一個顯示的swiper數據 * @originIndex 從源數據的哪個開始顯示默認0，如從其他頁面跳轉進來，要顯示第n個，這個參數就是他的下標 */ initSwiperData(originIndex = this.originIndex) { const originListLength = this.originList.length; // 源數據長度 const displayList = []; displayList[this.displayIndex] = this.originList[originIndex]; displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] = this.originList[ originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1 ]; displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] = this.originList[ originIndex + 1 == originListLength ? 0 : originIndex + 1 ]; this.displaySwiperList = displayList; }, /** * swiper滑動時候 */ swiperChange(event) { const { current } = event.detail; const originListLength = this.originList.length; // 源數據長度 // =============向后========== if (this.displayIndex - current == 2 || this.displayIndex - current == -1) { this.originIndex = this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1; this.displayIndex = this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1; this.initSwiperData(this.originIndex); } // ======如果兩者的差為-2或者1則是向前滑動============ else if (this.displayIndex - current == -2 || this.displayIndex - current == 1) { this.originIndex = this.originIndex - 1 == -1 ? originListLength - 1 : this.originIndex - 1; this.displayIndex = this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1; this.initSwiperData(this.originIndex); } }, }, created() { for (let i = 1; i <= 1300; i++) { this.originList.push(i); } this.initSwiperData(); }, }; </script> <style> .title { width: 100%; display: flex; justify-content: center; align-items: center; height: 60rpx; } .swiper { height: calc(100vh - 120rpx); } .wrap_content { border-radius: 20rpx; display: flex; justify-content: center; align-items: center; background: gray; height: 100vh; color: aqua; font-size: 80px; margin: 0rpx 40rpx; } </style> ~~~ ### 注意： 1、swiper-item的key一定要設置，并且用`index`。 ~~~xml <swiper-item v-for="(item, index) in displaySwiperList" :key="index"> <view class="wrap_content">{{ item }} </view> </swiper-item> ~~~ 2、如果只有一張情況，不想讓它來回滾動。可以設置`circular`，但是`circular`無法直接動態設置，我們可以使用`computed`來設置 ~~~jsx <template> <swiper :circular="!canCircular" > </swiper> </template> export default { data() { return { originList:[] } }, computed: { canCircular() { return this.originList.length > 0; // 看這里重點 } } } ~~~ #### gitlab地址： [https://gitee.com/xiaoguoyao/uni-app](https://links.jianshu.com/go?to=https%3A%2F%2Fgitee.com%2Fxiaoguoyao%2Funi-app) 最后編輯于：2022.01.08 19:10:30