公告列表
公告列表
收藏
回答

关于swiper组件动态添加item

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 swiper 微信安卓客户端 7.05 2.7.7

最近在做一个日历插件，需求是滑动切换月份，月份动态添加，如下图

下拉切换到上个月，上拉切换到下个月，为了滑动性能，月份是动态删减的，问题来了，切换事件里的 current 并不是动态改变的！！！

如果自己去改变的话就会出现动画来回切换的问题，真的很糟心。

建议组件在触发切换事件时current计算一下真实位置再丢出来嘛。现在的情况是我的数据已经改变，事件捕获的current确没有改变到正确的值。


代码片段   https://developers.weixin.qq.com/s/Hm6Qyhmi77aB

最后一次编辑于  2019-07-31
回答关注问题邀请回答
收藏

6 个回答

  • 呆呆熊
    呆呆熊
    2020-05-15

    你可以换个思路，使用 swiper 的 circular 衔接滑动；举例，如三个item，默认 current 为 1，当右滑动时，提前更新数组中下标为 0 的数据，依次类推，左滑依然如此。

    2020-05-15
    有用 3
    回复 1
    • 马飞翔
      马飞翔
      2022-07-20
      感谢感谢，非常有用，已实践；不过需要注意的是，默认的duration滚动的时候会有一点卡顿，把duration设置短一些就可以解决了。
      2022-07-20
      赞
      回复
  • 2019-12-09

    有解决办法了吗？我跟你遇到的需求是一样的，就是先展示三个swiper，当current=1向左滑时数组头动态加一个swiper，最开始的0变为1，需求是展示1但是展示0了

    2019-12-09
    有用
    回复 2
    • 2019-12-09
      我现在是手动自己计算current，要动态加数据的时候，把动画duration时长设置为0，其他滑动的时候再把动画时长设置回来
      2019-12-09
      赞
      回复
    • 2019-12-09
      这样看起来就是连贯的了
      2019-12-09
      赞
      回复
  • 武志国
    武志国
    2019-12-02

    遇到了同样的问题，那个多余的动画没法去掉。。。

    2019-12-02
    有用
    回复 5
    • 2019-12-09
      朋友，有找到办法了吗
      2019-12-09
      赞
      回复
    • 2019-12-09
      动态加载数据的时候，可以设置duration的时长为0
      2019-12-09
      赞
      回复
    • 2019-12-09
      我试试这个办法，谢朋友回复啦
      2019-12-09
      赞
      回复
    • 2019-12-09
      哇！真的看起来正常了！
      2019-12-09
      赞
      回复
    • 2019-12-09
      谢了朋友！
      2019-12-09
      赞
      回复
  • 🍪
    🍪
    2019-08-09

    我也碰到过类似的问题, swiper-item 太多很卡. 用类似滑动窗口的方式, 比如渲染完成后, 动态的调整 swipe-item 的 id, 结果会出现问题 :)

    2019-08-09
    有用
    回复 1
    • 邵小平
      邵小平
      2021-07-15
      不知道太多很卡的问题怎么解决？
      2021-07-15
      赞
      回复
  • 就在那里
    就在那里
    2019-07-31


    current是动态改变的啊

    2019-07-31
    有用
    回复 4
    • 2019-07-31
      我的意思是我开始有3条数据，我现在显示的是第二条，也就是current=1，然后我往下拉，事件触发后我在原来的数据前面再添加一条数据，按理说数据改变后现在显示的是current=1，但是得到的是0。
      2019-07-31
      赞
      回复
    • 就在那里
      就在那里
      2019-07-31回复
      试下判断current是增加还是减少，减少的话先setData修改月份数据，然后再修改current=e.detail.current+1,看下行不行的通
      2019-07-31
      赞
      回复
    • 2019-07-31回复就在那里
      行是行，但是动画是先跳到原来数据对应下标的，修改数据后，设置current跳转时会再次出现动画，这个动画不是我想要的……
      2019-07-31
      赞
      回复
    • 就在那里
      就在那里
      2019-08-01回复
      那可能要另寻它径了
      2019-08-01
      赞
      回复
  • 粗茶淡饭
    粗茶淡饭
    2019-07-31

    你一次就渲染几个月份？ current 是当前的下标 假如是3个swiper-item 那他最多是2  并不能和月份对应 可以加个id 滑动的时候判断current 更改id 根据id去判断渲染的月份数据


    2019-07-31
    有用
    回复 8
    • 2019-07-31
      一次渲染3个月份，最开始显示的是中间的月份，也就是 current = 1。当滑到下个月份时生成后面的月份数据，也就是说我滑到8月份并显示时就会生成9月份的数据。这个逻辑在查看后面的月份时是没有问题的，问题出在查看以前的月份，就是往下拉的时候，由于current在改变了数据的时候并不会改变，如果改变数据的时候手动去设置的话就会出现动画来回切换。滑动事件触发的时候已经是改变了current，再设置回正确的current回出现数据切换到正确数据的动画，这个动画不是我期望出现的。
      2019-07-31
      赞
      回复
    • 粗茶淡饭
      粗茶淡饭
      2019-07-31回复
      你可以搞个代码片段吗？
      2019-07-31
      赞
      回复
    • 2019-07-31回复粗茶淡饭
      那个太麻烦了
      2019-07-31
      赞
      回复
    • 2019-07-31回复
      打算用按钮去切换月份了
      2019-07-31
      赞
      回复
    • 粗茶淡饭
      粗茶淡饭
      2019-07-31

      我刚才测试的是 不过上滑还是下滑 current都会改变

      2019-07-31
      赞
      回复
    查看更多(3)
请 登录 后发表内容
相关问题
相关文档