swiper组件轮播图片右边空白问题

1,628 阅读1分钟

swiper组件轮播图片右边空白问题

刚开始使用iphone5预览正常,切换成iphone6 Plus之后,发现右边会有空白。

一、原始代码与效果

官方swiper组件

developers.weixin.qq.com/miniprogram…

示例代码

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/>
<slider bindchange="durationChange" show-value min="1000" max="10000"/>

实际效果图

1.jpg

二、修改

示例代码在 image 标签中设置了width和height,但这样看起来并没有生效,因为image标签中没有这两个属性,可能是官方文档新旧版本的出入吧。

2.jpg

解决办法: 将 width height 写在CSS中即可。 eg:

style="width:100%"

另一种可能性(没有遇到):www.wxapp-union.com/thread-2474…