参数说明
- circular Boolean false 是否采用衔接滑动,即播放到末尾后重新回到开头
- vertical Boolean false 滑动方向是否为纵向
- previous-margin String 0px 前边距,可用于露出前一项的一小部分,接受 px 和 rpx
- next-margin String 0px 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值
- autoplay Boolean false 是否自动切换
- disable-touch Boolean false 是否禁止用户 touch 操作
- interval Number 5000 自动切换时间间隔
- duration Number 500 滑动动画时长
- @change EventHandle
- current 改变时会触发 change 事件,event.detail = {current: current, source: source}
- current Number 0 当前所在滑块的 index
html
<view class="scroll_box">
<swiper class="swiper" circular="true" vertical="true" :previous-margin='50+"rpx"' :next-margin='50+"rpx"'
:autoplay="true" disable-touch='false' :interval="3000" :duration="2000" @change='EventHandle'>
<swiper-item v-for="(item,index) in list" :key="index">
<view :class="current==index?'swiper-item':'' ">{{item}}</view>
</swiper-item>
</swiper>
</view>
js
data() {
return {
current: 0,
list: [
'刚刚 1657*****8768 收到佣金9.9999元',
'刚刚 1657*****8768 收到佣金9.9999元',
'刚刚 1657*****8768 收到佣金9.9999元',
'刚刚 1657*****8768 收到佣金9.9999元',
'刚刚 1657*****8768 收到佣金9.9999元',
'刚刚 1657*****8768 收到佣金9.9999元',
],
};
},
methods: {
EventHandle(e) {
this.current = e.target.current;
},
},
css
.scroll_box {
background: #FFFFFF;
margin: 30rpx;
border-radius: 10rpx;
.swiper {
height: 150rpx;
}
.swiper-item {
background-color: #FECA71;
font-size: 32rpx;
}
}