收藏
回答

【已解决】<swiper>组件重新setData后轮播项出现空白

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug swiper 工具 8.0.2 2.14.3

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

我有一个A页面,第一次打开时渲染一个包含两条轮播文案的swiper组件,设置自动轮播,轮播正常。

当我切换到其他页面之后再回到A页面,由于业务原因,此时需要再次请求轮播数据进行setData,这时swiper组件相当于使用新的setData数据(尽管新旧数据一样)重新渲染了,于是这两条轮播的文案就出现了两个问题:

一是第一条文案滚过去之后出现一条空白,

二是这条空白滚过去之后出现一瞬间两条文案重叠,然后迅速的变成了第一条文案,

也就是说我只能看到第一条文案和一条空白交替轮播(疑似第二条文案定位有问题)

这种情况是swiper组件可能存在的bug吗?还是说我哪里用错了?😭

补充:我把这个容器高度放大了看出问题的效果,发现两条文案是每次同时出现的(正常情况应该是每次在顶部只出现一条)

补充:经测试发现是由于我使用了后端下发的字段给swiper文案设置颜色导致的这个问题,如果把颜色写死就没有这个bug。所以应该是<swiper-item>设置动态样式会引起问题。

解决方案:在<swiper-item>内部嵌套一层<text>,然后给<text>设置样式就可以了

最后一次编辑于  2021-02-25
回答关注问题邀请回答
收藏

1 个回答

  • 小黎
    小黎
    2021-02-25

    代码片段


    2021-02-25
    有用 1
    回复 8
    • 田小懒
      田小懒
      2021-02-25
      2021-02-25
      回复
    • 田小懒
      田小懒
      2021-02-25
      2021-02-25
      回复
    • 小黎
      小黎
      2021-02-25回复田小懒
      https://developers.weixin.qq.com/s/FkroTnmB7IoF  没有任何问题啊
      2021-02-25
      回复
    • 田小懒
      田小懒
      2021-02-25回复小黎
      我刚刚发现,不是重新set rollingTexts 数据导致的,我同时还用了一个后端下发的字体颜色添加到wxml的style里,每次setData都重新set了样式,把那个样式写死或者去掉就没这个问题
      2021-02-25
      回复
    • 田小懒
      田小懒
      2021-02-25
      2021-02-25
      回复
    查看更多(3)
登录 后发表内容
问题标签