微信小程序swiper横向滚动

效果如图：

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' },
    ]
  },