微信小程序使用swiper制作轮播图留白的解决方法

￡神魔★判官ぃ 2024-04-17 05:37 69阅读 0赞

> 微信小程序相比网页制作轮播图快捷了很多，直接可以使用swiper标签，但是对于新手来说，也有很多不可避免的坑。

附上轮播图代码

你可能会发现右边的一大片空白

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc5MjQwMQ_size_16_color_FFFFFF_t_70][]

也有可能机型选择在电脑上看不到空白，但是在手机预览时看到了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc5MjQwMQ_size_16_color_FFFFFF_t_70 1][]

与其这样得过且过，不如一次搞定

> 道理其实很简单，swiper下的图片被强制设定了宽度。所以只需要在swiper外围的view定位到image属性进行设置即可

在前面的基础上，在wxss下编写以下代码

.swp image{
    width: 100%;
    }

预览，就是下图这个样子了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc5MjQwMQ_size_16_color_FFFFFF_t_70 2][]

swiper属性设置

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:middle;width:54pt;">属性名</td> 
 <td style="vertical-align:middle;width:54pt;">类型</td> 
 <td style="vertical-align:middle;width:54pt;">默认值</td> 
 <td style="vertical-align:middle;width:54pt;">说明</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">indicator-dots</td> 
 <td style="vertical-align:middle;">Boolean</td> 
 <td style="vertical-align:middle;">FALSE</td> 
 <td style="vertical-align:middle;">是否显示面板指示点</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">indicator-color</td> 
 <td style="vertical-align:middle;">Color</td> 
 <td style="vertical-align:middle;">rgba(0, 0, 0, .3)</td> 
 <td style="vertical-align:middle;">指示点颜色</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">indicator-active-color</td> 
 <td style="vertical-align:middle;">Color</td> 
 <td style="vertical-align:middle;">#000000</td> 
 <td style="vertical-align:middle;">当前选中的指示点颜色</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">autoplay</td> 
 <td style="vertical-align:middle;">Boolean</td> 
 <td style="vertical-align:middle;">FALSE</td> 
 <td style="vertical-align:middle;">是否自动切换</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">current</td> 
 <td style="vertical-align:middle;">Number</td> 
 <td style="vertical-align:middle;">0</td> 
 <td style="vertical-align:middle;">当前所在滑块的 index</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">current-item-id</td> 
 <td style="vertical-align:middle;">String</td> 
 <td style="vertical-align:middle;">&nbsp;</td> 
 <td style="vertical-align:middle;">当前所在滑块的 item-id ，不能与 current 被同时指定</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">interval</td> 
 <td style="vertical-align:middle;">Number</td> 
 <td style="vertical-align:middle;">5000</td> 
 <td style="vertical-align:middle;">自动切换时间间隔</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">duration</td> 
 <td style="vertical-align:middle;">Number</td> 
 <td style="vertical-align:middle;">500</td> 
 <td style="vertical-align:middle;">滑动动画时长</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">circular</td> 
 <td style="vertical-align:middle;">Boolean</td> 
 <td style="vertical-align:middle;">FALSE</td> 
 <td style="vertical-align:middle;">是否采用衔接滑动</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">vertical</td> 
 <td style="vertical-align:middle;">Boolean</td> 
 <td style="vertical-align:middle;">FALSE</td> 
 <td style="vertical-align:middle;">滑动方向是否为纵向</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">previous-margin</td> 
 <td style="vertical-align:middle;">String</td> 
 <td style="vertical-align:middle;">0px</td> 
 <td style="vertical-align:middle;">前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">next-margin</td> 
 <td style="vertical-align:middle;">String</td> 
 <td style="vertical-align:middle;">0px</td> 
 <td style="vertical-align:middle;">后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">display-multiple-items</td> 
 <td style="vertical-align:middle;">Number</td> 
 <td style="vertical-align:middle;">1</td> 
 <td style="vertical-align:middle;">同时显示的滑块数量</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">skip-hidden-item-layout</td> 
 <td style="vertical-align:middle;">Boolean</td> 
 <td style="vertical-align:middle;">FALSE</td> 
 <td style="vertical-align:middle;">是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">bindchange</td> 
 <td style="vertical-align:middle;">EventHandle</td> 
 <td style="vertical-align:middle;">&nbsp;</td> 
 <td style="vertical-align:middle;">current 改变时会触发 change 事件，event.detail = {current: current, source: source}</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">bindanimationfinish</td> 
 <td style="vertical-align:middle;">EventHandle</td> 
 <td style="vertical-align:middle;">&nbsp;</td> 
 <td style="vertical-align:middle;">动画结束时会触发 animationfinish 事件，event.detail 同上</td> 
 </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc5MjQwMQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/bc2647961da74f6ebdf1ff29cc46cfd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc5MjQwMQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/a8f30b7b7657465d9b4c0751b0593b0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc5MjQwMQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/79a85e603ed14d99b3c0f203c7f87582.png