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

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)
请 登录 后发表内容
相关文档
问题标签
小程序开发组件动画swiper视图容器