微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑。
附上轮播图代码
<view class="swp">
<swiper style="height:220px;" indicator-dots="true" indicator-active-color="red" indicator-color="white" autoplay="true" interval="3000" interval="3000" circular="true">
<swiper-item>
<image src="/images/sw1.png" bindtap="gzh"></image>
</swiper-item>
<swiper-item>
<image src="/images/sw2.png" bindtap="comi"></image>
</swiper-item>
</swiper>
</view>
你可能会发现右边的一大片空白
也有可能机型选择在电脑上看不到空白,但是在手机预览时看到了
与其这样得过且过,不如一次搞定
道理其实很简单,swiper下的图片被强制设定了宽度。所以只需要在swiper外围的view定位到image属性进行设置即可
在前面的基础上,在wxss下编写以下代码
.swp image{
width: 100%;
}
预览,就是下图这个样子了
swiper属性设置
属性名 | 类型 | 默认值 | 说明 |
indicator-dots | Boolean | FALSE | 是否显示面板指示点 |
indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 |
indicator-active-color | Color | #000000 | 当前选中的指示点颜色 |
autoplay | Boolean | FALSE | 是否自动切换 |
current | Number | 0 | 当前所在滑块的 index |
current-item-id | String | 当前所在滑块的 item-id ,不能与 current 被同时指定 | |
interval | Number | 5000 | 自动切换时间间隔 |
duration | Number | 500 | 滑动动画时长 |
circular | Boolean | FALSE | 是否采用衔接滑动 |
vertical | Boolean | FALSE | 滑动方向是否为纵向 |
previous-margin | String | 0px | 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 |
next-margin | String | 0px | 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 |
display-multiple-items | Number | 1 | 同时显示的滑块数量 |
skip-hidden-item-layout | Boolean | FALSE | 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 |
bindchange | EventHandle | current 改变时会触发 change 事件,event.detail = {current: current, source: source} | |
bindanimationfinish | EventHandle | 动画结束时会触发 animationfinish 事件,event.detail 同上 |