收藏
评论

【优化】解决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

最后一次编辑于  2019-01-25
收藏

9 个评论

  • 洪三金
    洪三金
    2019-01-09

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

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

      有道理,这就去加

      2019-01-09
      回复
  • Orlando
    Orlando
    05-28

    这个方法很棒,就是切换的时候会跳回去。 换了一个思路 可以试试 https://developers.weixin.qq.com/community/develop/article/doc/0008e670ef499866a16a886bc5bc13

    05-28
    赞同
    回复
  • 墙角有只猴
    墙角有只猴
    03-07

    大神,请问一下为啥你那代码里面判断左右滑动的current只有0和2,就是下面这张图

    但是我写的时候也是按你这个方法来写的,但是滑动事件打印出来的current值是0,1,2,我看文档里面不是说current就是swiper的index值吗,因为我这种情况就没法判断page的增减情况了,求解答,下面这张图是我的

    03-07
    赞同
    回复 1
    • var 友原
      var 友原
      03-09
      不太明白你的意思,我current一开始就设为1的
      03-09
      回复
  • 刁_Kyle
    刁_Kyle
    2019-05-07

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

    2019-05-07
    赞同
    回复 7
    • var 友原
      var 友原
      2019-05-07

      这不都一样嘛

      2019-05-07
      回复
    • 刁_Kyle
      刁_Kyle
      2019-05-08

      不一样的

      2019-05-08
      回复
    • uccs
      uccs
      2019-10-28回复刁_Kyle
      你这个不还是一次性全部渲染出来么
      2019-10-28
      回复
    • 刁_Kyle
      刁_Kyle
      2019-10-28回复uccs
      是的,渲染出所有swiper-item,可能不太适合一些场景;我尝试过楼主的这种方式,但是交互体验不好。
      2019-10-28
      回复
    • Pluto.
      Pluto.
      04-29
      你这个啥意思 不是全部渲染出来吗 不还是卡么 渲染慢么
      04-29
      回复
    查看更多(2)
  • 马十一
    马十一
    2019-04-28

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

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

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

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

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

      2019-04-29
      回复
  • 卡卡
    卡卡
    2019-04-22

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

    2019-04-22
    赞同
    回复 3
  • 水中的鱼
    水中的鱼
    2019-03-31

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

    2019-03-31
    赞同
    回复
  • Wcly👺
    Wcly👺
    2019-01-09

    大神,牛逼!

    2019-01-09
    赞同
    回复
  • Loving Strangers
    Loving Strangers
    2019-01-08

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

    2019-01-08
    赞同
    回复 1
登录 后发表内容