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

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

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

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

一、原始代码与效果

官方swiper组件

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

示例代码

  1. <swiper indicator-dots="{
  2.    {indicatorDots}}"
  3.   autoplay="{
  4.    {autoplay}}" interval="{
  5.    {interval}}" duration="{
  6.    {duration}}">
  7.   <block wx:for="{
  8.    {imgUrls}}">
  9.     <swiper-item>
  10.       <image src="{
  11.    {item}}" class="slide-image" width="355" height="150"/>
  12.     </swiper-item>
  13.   </block>
  14. </swiper>
  15. <button bindtap="changeIndicatorDots"> indicator-dots </button>
  16. <button bindtap="changeAutoplay"> autoplay </button>
  17. <slider bindchange="intervalChange" show-value min="500" max="2000"/>
  18. <slider bindchange="durationChange" show-value min="1000" max="10000"/>

实际效果图

在这里插入图片描述

二、修改

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

在这里插入图片描述

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

  1. style="width:100%"

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

发表评论

表情：
评论列表 （有 0 条评论，144人围观）

还没有评论，来说两句吧...

相关阅读