利用swiper组件做轮播,接口动态数据已经放进去了,图片有时无法显示,bug?
发布于 7 年前 作者 lei70 6308 次浏览 来自 官方Issues
代码如下,我看很多人都有提这个问题
<swiper current="{{currentNum}}" bindchange="pagechange"
class="swiper-content" circular="true" autoplay="{{autoplay}}"
indicator-dots="{{bannerList.length > 1 ? indicatorDots : false}}" style="width:100%;height:360rpx;" interval="{{interval}}" duration="{{duration}}">
  <block wx:if="{{bannerList && bannerList.length > 0}}" wx:for="{{bannerList}}" wx:key="{{index}}">
   <swiper-item class='tabs-item'>
               <view wx:if="{{item.positionType=='native'}}" data-index="{{index}}"
       data-psurl="{{item.positionUrl}}" @tap="{{!buttonClicked?'adventshareId':''}}" class="size-item">
                 <view class="form-button layout-column">
                   <image src="{{item.imageUrl || 'https://kjb-oss.oss-cn-shenzhen.aliyuncs.com/ul9zg740a645wxjfxddl.png'}}"
          class="swiper-image" data-index="{{index}}" binderror="swiperimageOnloadError"/>
                 </view>
               </view>
    <image wx:else src="{{item.imageUrl || 'https://kjb-oss.oss-cn-shenzhen.aliyuncs.com/ul9zg740a645wxjfxddl.png'}}" data-index="{{index}}"
        binderror="swiperimageOnloadError" class="swiper-image" data-psurl="{{item.positionUrl}}" @tap="{{!buttonClicked?'tapurl':''}}" />
   </swiper-item>
  </block>
</swiper>
2 回复

就和这种情况一样 我看其他开发人员也有提出这个问题 希望官方能解决下 偶发性问题 几率还挺大

这是因为你 动态操作了 current导致的。需要在 bindchange里设置判断条件。

currentHandle(e) {

    let {

      current,

      source

    } = e.detail

    if (source === ‘autoplay’ || source === ‘touch’) {

      this.setData({

        current

      })

    }

  }

官方也说了这个问题,仔细查看文档应该能避免这类问题的:

回到顶部