效果如图:
1、wxml
display-multiple-items:同时显示的滑块数量
circular:是否采用衔接滑动
previous-margin:前边距,用于露出前一项的一小部分
next-margin: 后边距,用于露出后一项的一小部分
<view class='swiper-view'>
<swiper class='swiper-swiper' display-multiple-items="{{5}}" circular="true" previous-margin="10rpx;" next-margin="10rpx;">
<swiper-item wx:for="{{imgArr}}">
<view class="swiper-item">
<image class='swiper-item-img' src='{{item.src}}' mode="aspectFit"></image>
</view>
</swiper-item>
</swiper>
</view>
2、wxss
.swiper-view{
height: 180rpx;
background: #ccc;
margin-bottom: 20rpx;
}
.swiper-view .swiper-swiper{
width: 100%;
height: 100%;
}
.swiper-view .swiper-item{
height: 100%;
margin: 0 10rpx;
}
.swiper-view .swiper-item .swiper-item-img{
width: 100%;
height: 100%;
}
3、js
data: {
imgArr: [
{ src: '../../img/m1.jpg'},
{ src: '../../img/m2.jpg' },
{ src: '../../img/m3.jpg' },
{ src: '../../img/m4.jpg' },
{ src: '../../img/m5.jpg' },
{ src: '../../img/m6.jpg' },
]
},