收藏
回答

关于swiper组件动态添加item

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

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

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

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

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


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

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

7 个回答

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

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

    2020-05-15
    有用 2
    回复 1
    • 马飞翔
      马飞翔
      07-20
      感谢感谢,非常有用,已实践;不过需要注意的是,默认的duration滚动的时候会有一点卡顿,把duration设置短一些就可以解决了。
      07-20
      回复
  • 小程序商城定制开发2600元全包
    小程序商城定制开发2600元全包
    2021-06-06

    首先页面需要wx:for 循环。在swiper上使用 bindchange,JS里捕获e.detail.current

    JS方面:

    判断你的当前捕获事件current页是否为最后,例如你页面渲染同时显示3个item,JS里默认首组item的数量为8,那么最后的判定条件为current==5。条件为真时请求下一组数据然后推进数据绑定的data里就可以渲染出来了。刚实测过,可行。有老兄说数据拉取次数过多过大会降低运行速度。可以考虑用wx:if判断多余的数据是否需要渲染出来,或者用hidden。但是我印象里hidden是占用资源的。目前我还没有太多数据测试。


    2021-06-06
    有用 1
    回复
  • 水星
    水星
    2019-12-09

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

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

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

    2019-12-02
    有用
    回复 5
    • 水星
      水星
      2019-12-09
      朋友,有找到办法了吗
      2019-12-09
      回复
    • Mr.Lyy
      Mr.Lyy
      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
    • Mr.Lyy
      Mr.Lyy
      2019-07-31
      我的意思是我开始有3条数据,我现在显示的是第二条,也就是current=1,然后我往下拉,事件触发后我在原来的数据前面再添加一条数据,按理说数据改变后现在显示的是current=1,但是得到的是0。
      2019-07-31
      回复
    • 就在那里
      就在那里
      2019-07-31回复Mr.Lyy
      试下判断current是增加还是减少,减少的话先setData修改月份数据,然后再修改current=e.detail.current+1,看下行不行的通
      2019-07-31
      回复
    • Mr.Lyy
      Mr.Lyy
      2019-07-31回复就在那里
      行是行,但是动画是先跳到原来数据对应下标的,修改数据后,设置current跳转时会再次出现动画,这个动画不是我想要的……
      2019-07-31
      回复
    • 就在那里
      就在那里
      2019-08-01回复Mr.Lyy
      那可能要另寻它径了
      2019-08-01
      回复
  • 字符串
    字符串
    2019-07-31

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


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

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

      2019-07-31
      回复
    查看更多(3)
登录 后发表内容