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

灰太狼 2024-04-17 05:46 36阅读 0赞

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

> 刚开始使用iphone5预览正常，切换成iphone6 Plus之后，发现右边会有空白。所以尝试解决了。

## 一、原始代码与效果 ##

### 官方swiper组件 ###

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

### 示例代码 ###

<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"/>

### 实际效果图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzNjg1NTE_size_16_color_FFFFFF_t_70]

## 二、修改 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzNjg1NTE_size_16_color_FFFFFF_t_70 1]

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

style="width:100%"

另一种可能性（没有遇到）：http://www.wxapp-union.com/thread-2474-1-1.html

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzNjg1NTE_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/1d887757d0ad4fe09ba3da08fce676ea.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzNjg1NTE_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/7b8e138749684a91a5c191cd058cc714.jpg