收藏
回答

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

框架类型 问题类型 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有数值时,最后一页当右边并不会出现第一页当一部分内容。如下图


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

4 个回答

  • CH┏ (^ω^)=☞鹏
    CH┏ (^ω^)=☞鹏
    2023-04-14

    请问楼主动画失效的问题解决了吗,我刚好也遇到这个问题,想问下是怎么解决的

    2023-04-14
    有用
    回复
  • at will
    at will
    2020-06-14

    https://developers.weixin.qq.com/community/develop/doc/000684a80280609f92596a95257000?_at=1592116859897

    我的回复,供参考

    2020-06-14
    有用
    回复
  • 污昂ᰔᩚ王࿐
    污昂ᰔᩚ王࿐
    2019-09-24

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

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

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

    2019-09-24
    有用
    回复 10
    • 呀哈ha
      呀哈ha
      2019-09-24
      https://developers.weixin.qq.com/s/OaktlCm47HbK
      2019-09-24
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2019-09-24回复呀哈ha

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


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