评论

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

简单的解决swiper性能问题

最近再用swiper,当有超过20个SwiperItem就会出现卡顿。

查看了各种资料 比如 https://developers.weixin.qq.com/community/develop/doc/000068ff25ccf0bae4e76eab156c04

这个方案不错,但是切换的时候会出现一个突然的跳跃,因为swiper的current会变。

经过我自己很多尝试,发现一个完美解决方案。

核心思想就是把没有显示出来的dom元素尽量简化 比如用空 <SwiperItem/> 代替

const ITEM_LIMIMT = 3;

         <Swiper  
            current ={currentIndex}
            onChange={onChangeSwiper}
            displayMultipleItems={1}
            duration={300}
          >
            {items.map((item: any, index: number) =>
              currentIndex < index + ITEM_LIMIMT && currentIndex > index - ITEM_LIMIMT ? (
                <SwiperItem key={index}>
                  <ComplexComponent item={item}/>
                </SwiperItem>
              ) : (
/* 没有显示出来的元素用空SwiperItem 代替*/  
           <SwiperItem key={index} />
                ),
              )}
            </Swiper>
最后一次编辑于  2020-05-28  
点赞 3
收藏
评论

4 个评论

  • 小蜜蜂
    小蜜蜂
    2020-05-29

    奇怪,数据绑定不都是两层花括号吗? {{...}}

    2020-05-29
    赞同 2
    回复 1
    • Bertram
      Bertram
      2023-06-21
      他这个是react,单层的{}
      2023-06-21
      回复
  • free
    free
    2022-05-07

    大佬,有代码片段吗

    2022-05-07
    赞同
    回复
  • 小黑的铁粉
    小黑的铁粉
    2021-08-26

    确实快了很多,给作者加鸡腿

    2021-08-26
    赞同
    回复 1
    • free
      free
      2022-05-07
      有代码片段么 大佬
      2022-05-07
      回复
  • cong
    cong
    2020-06-15

    我的解决办法 https://developers.weixin.qq.com/community/develop/article/doc/000e665d0bcc78861d8a7dcef5b413 大家可以一起交流 希望有更好的办法

    2020-06-15
    赞同
    回复
登录 后发表内容