微信小程序解决swiper数量多导致渲染卡顿的解决方案

最新推荐文章于 2025-01-02 11:01:37 发布

Code_guy_

最新推荐文章于 2025-01-02 11:01:37 发布

阅读量6.3k

点赞数 7

本文链接：https://blog.youkuaiyun.com/whoami138/article/details/116246146

版权

小程序 swiper组件渲染优化无缝轮播性能提升

关键词由优快云通过智能技术生成

本文探讨了在小程序中使用swiper组件时遇到的渲染卡顿问题，提出了一种优化策略：仅渲染三个swiper-item，结合circular属性实现无缝轮播。通过动态更新数据和索引，避免了滑动回弹动画，提高了性能。同时，文章提供了详细的代码示例来说明如何实现这一方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发小程序时，我们经常会用到swiper组件实现轮播或者翻页效果，但是当swiper-item数量过多时，会造成视图层渲染卡顿的问题。

有网友推荐的做法是只渲染三个swiper-item，分别是本条数据以及上一条和下一条，默认当前显示的swiper-item位置是中间那个，然后根据滑动动态更改三条数据，并把current位置设置回中间那个swiper-item，也就是current:1, 但是这种做法会在setData({current:1})时有个往回滑动的动画效果，这里也有个简单粗暴的解决办法就是通过设置duration='0'直接关闭动画，但不管怎样做，体验都是相对较差的。

还有的网友的做法是先渲染n个空的swiper-item，n是当前数据的条数，然后只插入当前索引以及上下两条数据，并根据滑动动态修改对应位置的数据，这种做法比上一种更简单，优化了性能，也解决了翻页会有往回滑动动画的问题，但是当swiper-item量足够大时，比如1000条，渲染仍会非常卡顿。

个人认为最佳的解决办法是对第一种解决方案进行改进：

同样的是只在视图层渲染三个swiper-item，其它的数据存在数组中
在swiper组件中加入circular属性，使swiper可以衔接滑动
然后swiper中当前显示swiper-item的索引也是动态的，数据需要根据当前索引更新到对应位置，并不是直接将current固定在第二条，结合circular属性，就可以实现只渲染了三条swiper-item并且滑动无跳回，并解决了swiper数量过多导致渲染卡顿的问题。

现实的效果图：

直接说可能不太清晰，下面直接上代码

首先是wxml：

 
 <swiper circular bindchange="onSwiperChange">
 
   <swiper-item wx:for="{{displayList}}" wx:key="index">
 
     <view>{{item}}</view>
 
   </swiper-item>
 
 </swiper>

js：

 
 // 假设这是要渲染到swiper-item的数据
 
 let list = [1,2,3,4,5,6,7,8,9,10];
 
 // 这是当前swiper-item在list中的索引
 
 let index = 0;
 
 // 这是当前swiper-item在swiper中的索引
 
 let currentIndex = 0;
 
 Page({
 
   data: {
 
     // 要渲染到swiper-item的数组
 
     displayList:[],
 
   },
 
   onLoad() {
 
     this.upDateDisplayList();
 
   },
 
   // 更新当前displayList
 
   upDateDisplayList(){
 
     let displayList = [];
 
     displayList[currentIndex] = list[index];
 
     displayList[currentIndex-1 == -1 ? 2:currentIndex-1] = list[index-1 == -1 ? list.length-1 : index -1];
 
     displayList[currentIndex+1 == 3 ? 0:currentIndex+1]= list[index+1 == list.length ? 0 : index+1];
 
     this.setData({
 
       displayList,
 
     })
 
   },
 
   onSwiperChange(e){
 
     // 先判断是向前滑动还是向后滑动
 
     // current 为滑动后swiper-item的索引
 
     let current = e.detail.current
 
     // currentIndex是滑动前swiper-item的索引
 
     // 如果两者的差为2或者-1则是向后滑动
 
     if(currentIndex-current==2 || currentIndex-current==-1){
 
       index = index + 1 == list.length ? 0 : index + 1;
 
       currentIndex = currentIndex + 1 == 3 ? 0 : currentIndex + 1;
 
       this.upDateDisplayList();
 
     }
 
     // 如果两者的差为-2或者1则是向前滑动
 
     else if(currentIndex-current==-2 || currentIndex-current==1) {
 
       index = index - 1 == -1 ? list.length-1 : index - 1;
 
       currentIndex = currentIndex-1 == -1 ? 2 : currentIndex - 1;
 
       this.upDateDisplayList();
 
     }
 
   },
 
 })