收藏
回答

100个swiper-item,如何优化,有没有替代方案?

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug swiper 微信iOS客户端 6.5.3 2.6.5

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

回答关注问题邀请回答
收藏

5 个回答

  • Garcia
    Garcia
    05-17
    WXS:
    // 是否邻接
    function isAdjoin(index, current, total) {
      var abs = Math.abs(index - current);
      if (abs <= 1) {
        return true;
      } else if (abs == total - 1) {
        return true;
      } else {
        return false;
      }
    }
    
    module.exports = {
      isAdjoin: isAdjoin,
    };
    
    在swiper-item 的内部第一个外层标签用上
    <block wx:for="{{list}}" wx:key="index">
       <swiper-item>
          <view wx:if="{{tools.isAdjoin(index,currentIndex,list.length)}}">
             代码....
          </view>
       </swiper-item>
    </block>
    


    05-17
    有用 2
    回复 2
    • banana
      banana
      05-18
      14pro 看着不卡。不知道安卓什么效果
      05-18
      回复
    • banana
      banana
      05-21
      完美解决感谢
      05-21
      回复
  • F
    F
    05-17

    做分页就是了 例如默认十个后当到倒数第二个的时候加载下一页的内容 加起来一共需要十次加载,这样也可以避免用户手机流量的损失 手机流量是需要钱买的 一次100页图片也不少了 如果是视频的更离谱

    05-17
    有用 1
    回复 2
    • banana
      banana
      05-18
      全部数据加载完了 滑动的时候也卡
      05-18
      回复
    • F
      F
      05-18回复banana
      需求说下
      05-18
      回复
  • 天赐
    天赐
    05-20

    建议参考skyline框架的swiper cache-extend 属性,我也在看这个问题,目前swiper切换还是比较流畅,但是大量swiper-item下的点击事件重新渲染比较慢

    05-20
    有用
    回复
  • dreamhunter
    dreamhunter
    05-17

    非常规需求啊

    05-17
    有用
    回复
  • 一笑皆春
    一笑皆春
    05-17

    自己用动画实现一个

    05-17
    有用
    回复 1
    • 一笑皆春
      一笑皆春
      05-17
      每次只加载一个,监听手势做一个切换动画就可以了
      05-17
      回复
登录 后发表内容