收藏
回答

swiper组件动态改变next-margin值时动画失效

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug swiper 工具 7.0.7 2.8.3
<swiper class="swiper" :next-margin='active !== 1?30:0' :duration='500' :circular='true' @change="swiperChange">

只贴这一部分应该能理解。

这里目前写都还是静态页面。需求是非最后一页时右边能看到第二页都一部分内容,最后一页展示全部,所以设置了next-margin为30,当切换到最后一页时变成0。但是动画也会因此失效,变成瞬间切换,尝试设置动画时间和动画效果也没用。

当设置来circular为true,next-margin有数值时,最后一页当右边并不会出现第一页当一部分内容。如下图


最后一次编辑于  09-24  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • 娇华
    娇华
    09-24

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    09-24
    赞同
    回复 8
    • 呀哈ha
      呀哈ha
      09-24
      https://developers.weixin.qq.com/s/OaktlCm47HbK
      09-24
      回复
    • 娇华
      娇华
      09-24回复呀哈ha

      使用代码片段没法复现呀,next-margin给了固定值呀


      09-24
      回复
    • 呀哈ha
      呀哈ha
      09-24回复娇华
      当设置来circular为true,next-margin有数值时,最后一页当右边并不会出现第一页当一部分内容。这个代码片段是这一部分的。你滑到第二页就会发现问题了
      09-24
      回复
    • 呀哈ha
      呀哈ha
      09-24回复娇华
      next-margin是动态值这个麻烦你自己改写一下,就是一个change事件到最后一页时把他变成0就可以复现了。
      09-24
      回复
    • 娇华
      娇华
      09-24回复呀哈ha
      能否直接把代码片段补充完整呢
      09-24
      回复
    查看更多(3)
  • 王志鹏
    王志鹏
    09-24

    语法错了啊next-margin='{{active !== 1?30:0}}' 这样试试哥们  active 是一个根据轮播下标变化的变量吧

    09-24
    赞同
    回复 4
    • 王志鹏
      王志鹏
      09-24
      https://developers.weixin.qq.com/s/NPp45Cm67AbV
      09-24
      回复
    • 呀哈ha
      呀哈ha
      09-24
      我用框架写到哈,语法是正确的。编译之后就是你这样
      09-24
      回复
    • 呀哈ha
      呀哈ha
      09-24
      刚刚试了你的这个代码也是有一样的问题,你的是动态next,当你滑到第12页到时候动画也没了变成瞬间切换。然后你把next-margin='{{active !== 1?30:0}}改成next-margin='30',也会出现最后一页到右边空白
      09-24
      回复
    • 王志鹏
      王志鹏
      09-24回复呀哈ha
      嗯 就是动态改变next-margin的时候动画变成了瞬间切换,这还真是个bug
      09-24
      回复
问题标签