# 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