uni-app swiper数量过多时卡顿优化方案，微信小程序swiper优化

swiper数量达到大约400+时候会出现明显滑动卡顿，渲染慢的问题，达到1000+时候需要几十秒时间，或者可能导致渲染失败。

配置 circular="true" 属性开启衔接滑动，即播放到末尾后重新回到开头。然后固定用于展示的swiper-item只设置3个，当滑动时候去替换展示的数据。这种方法可以展示几千万的数据展示都没问题。

//页面源码

1、swiper-item的key一定要设置，并且用 index 。

2、如果只有一张情况，不想让它来回滚动。可以设置 circular ，但是 circular 无法直接动态设置，我们可以使用 computed 来设置

>

，只能滚动

如果使用的是小程序的原生oage，可以使用wxgetSystemInfo接口来获取设备的各种信息（包括屏幕宽高），然后根据实际情况来计算页面需要的高度；

如果页面是用h5写的，可以在页面加载完成后，动态添加weui-page__bd的高度，然后将页面内容以外的滚动条隐藏掉：

<script type="text/javascript">

windowonload=function(){

//获取page容器标签

var pageElem=documentgetElementsByClassName('weui-page__bd')[0];

//获取设备的高度

var windowHeight=windowscreenheight;

pageElemstyleheight=windowHeight+"px";

}

</script>

地址： >

微盟小程序的业务逻辑如下。

1、用户上滑页面滚动条触底开始加载下一页数据。

2、利用滚动条触底事件（onReachBottom）。

3、判断还有没有下一页数据。

4、获取到总页数总页数=Mathceil(总条数/页容量)。

5、获取到当前的页码。

6、判断一下当前的页码是否大于总页数，如果大于的话，表示没有下一页数据。

以上就是关于uni-app swiper数量过多时卡顿优化方案，微信小程序swiper优化全部的内容，包括:uni-app swiper数量过多时卡顿优化方案，微信小程序swiper优化、微信小程序实现 TabLayout 并带有过渡效果、小程序打开javaweb页面太小了等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！