收藏
评论

【优化】解决swiper渲染很多图片时的卡顿

相信各位在开发的时候应该有遇到这样一个场景,比如商品的图片浏览,有时图片的浏览会很大,多的时候达几百张或上千张,这样就需要swiper里需要很多swiper-item,如此一来渲染的时候就会很消耗性能,渲染时会有一大段的空白时间,有时还会造成卡顿,体验非常差,下面给大家介绍一下我的解决方案。


首先是wxml结构:




js:




主要是利用current属性,swiper里面只放3个swiper-item,要显示的图片放在第二,第一和第三放的是加载的动画背景,步骤如下:


1. 将请求到的数据存入一个数组picListAll内,这里不需要setData,只需要在data外面定义一个变量就行了,以减少渲染性能。

2. 把要显示的图片路径赋值给picUrl,

3. 切换的时候根据bindchange获取current属性,当current改变时判断当前图片在picListAll的index,根据index拿到图片再赋值给picUrl


主要实现步骤就是以上3 步,比较简单,要注意的是当切换到第一张和最后一张的时候要判断一下,把loding动画去掉,请求的时候还可以传入index参数以显示不同的图片,方便从前一页点击图片进入到此页面时能定位到该图片,例子里我是自己mock数据的,只是为了展示,如果你有服务器的话可以弄几百张看看效果,对比直接渲染和用以上方式渲染的差异。当然,这只是我的解决方案,如果各位有更好的方案欢迎一起讨论,一起进步.


                                                                                                                                                                                                                                      系甘先,得闲饮茶


完整代码:https://github.com/HaveYuan/swiper

最后一次编辑于  01-25  (未经腾讯允许,不得转载)
复制链接收藏赞 9

15 个评论

  • NaN
    NaN
    01-08

    测试了一下  明显快很多 感谢大佬分享

    01-08
    赞同
    回复 1
    • var 友原
      var 友原
      01-08

      谢谢

      01-08
      赞同
      回复
  • Wcly💬
    Wcly💬
    01-09

    大神,牛逼!

    01-09
    赞同
    回复
  • 洪三金
    洪三金
    01-09

    最好加一点 注释 ,照顾一些理解能力差的同学( 比如我 ),后面来的接盘侠,背锅侠也能快速入手。

    01-09
    赞同
    回复 1
    • var 友原
      var 友原
      01-09

      有道理,这就去加

      01-09
      赞同
      回复
  • 水中的鱼
    水中的鱼
    03-31

    感谢, 解决了图片太多卡死的问题. 不过这个方案有个问题就是切换图片时会闪烁, 在白色背景下会很刺眼. 使用了黑色背景后会好很多.

    03-31
    赞同
    回复
  • 卡卡
    卡卡
    04-22

    请问如果swiper-item数量有几千个,每次请求20个,这种情况用swiper合适嘛,请大神指点一下,谢谢

    04-22
    赞同
    回复 2
    • var 友原
      var 友原
      04-22

      可以的,只要每次只渲染一个就行了,20个渲染完再请求再渲染,请求过的用另外一个数组存起来,其它的用bindchange判断就行了

      04-22
      赞同
      回复
    • 刁_Kyle
      刁_Kyle
      05-07

      这种体验不好

      05-07
      赞同
      回复
  • 马十一
    马十一
    04-28

    大佬   我们公司要做抖音一样的小程序,我用swiper-item设置为相对定位relative,视频全屏自动填充,几个按钮通过absolute,来定位到右下角,每次刷新都是,视频现出来,几个按钮一会再出来。。。。,是swiper的问题吗

    04-28
    赞同
    回复 2
    • var 友原
      var 友原
      04-29

      应该不是吧,可能是渲染的问题

      04-29
      赞同
      回复
    • 马十一
      马十一
      04-29回复var 友原

       大佬  有三个问题  加你微信问一下好吗    太急了  所以才会贸然请求加微信,我的微信号是m1552215764    多有打扰   请多原谅

      04-29
      赞同
      回复
  • 刁_Kyle
    刁_Kyle
    05-07

    可以尝试下这个思路: https://github.com/freezerup/mp-issues/tree/master/pages/swiper

    05-07
    赞同
    回复 2
    • var 友原
      var 友原
      05-07

      这不都一样嘛

      05-07
      赞同
      回复
    • 刁_Kyle
      刁_Kyle
      05-08

      不一样的

      05-08
      赞同
      回复