小程序 swiper组件的使用
swiper组件在小程序中一般充当广告页面作用存在,就是我们平时所说的轮播图
swiper轮播图在小程序中的高度为150px,多余部分将会被裁掉。轮播图的原始高度不能高于150px。
若高于150px单位的swiper将要重新设置。
滑块视图容器。其中只可放置<swiper-item>组件,否则会导致未定义的行为。
属性 类型 默认值 必填 说明 最低版本
indicator-dots boolean false 否 是否显示面板指示点 1.0.0
indicator-color color rgba (0, 0, 0, .3) 否 指示点颜色 1.1.0
indicator-active-color color #000000 否 当前选中的指示点颜色 1.1.0
autoplay boolean false 否 是否自动切换 1.0.0
current number 0 否 当前所在滑块的 index 1.0.0
interval number 5000 否 自动切换时间间隔 1.0.0
duration number 500 否 滑动动画时长 1.0.0
circular boolean false 否 是否采用衔接滑动 1.0.0
vertical boolean false 否 滑动方向是否为纵向 1.0.0
前边距,可用于露出
previous-margin string "0px" 否 前一项的一小部分,
接受 px 和 rpx 值1.9.0
next-margin string "0px" 否 后边距,可用于露出后
一项的一小部分,接受
px 和 rpx 值1.9.0
display-multiple-items number 1 否 同时显示的滑块数量 1.9.0
skip-hidden-item-layout boolean false 否 是否跳过未显示的滑
块布局,设为 true 可
优化复杂情况下的滑动
性能,但会丢失隐藏状
态滑块的布局信息 1.9.0
easing-function string "default" 否 指定 swiper 切换缓动
动画类型 2.6.5
bindchange eventhandle 否 current 改变时会触发
change 事件,event.detail =
{current, source}1.0.0
bindtransition eventhandle 否 swiper-item 的位置发生改变
时会触发 transition 事件,
event.detail = {dx: dx, dy: dy}
bindanimationfinish eventhandle 否 动画结束时会触发
animationfinish 事件,
event.detail 同上1.9.0
swiper组件要结合swiper-item一起使用
<swiper indicator-dots ={{true}} autoplay={{true}} interval ="5000" duration="500" >
<swiper-item >
<image src="../img/image1.png" mode="widthFix"></image>
</swiper-item>
<swiper-item >
<image src="../img/image2.png" mode="widthFix"></image>
</swiper-item>
</swiper>
wxss:
.slideshow {
width: 96%;
border-radius: 50rpx;
overflow: hidden;
margin: 20rpx auto;
}
关键在于:overflow:hidden;