微信小程序 swiper 组件简洁使用方法

基本样式设置

swiper 基本样属性直接标注在 swiper 的原始标签上；swiper wei

1. 显示相邻滑块的部分区域

• next-margin
• previous-margin

<swiper class="swiper_middle" next-margin="60rpx" previous-margin="60rpx">

  <swiper-item class="swiper_lit">
    <view class="middle">
      test1
    </view>
  </swiper-item >

  <swiper-item class="swiper_lit">
    <view class="middle">
    test2
    </view>
  </swiper-item>

  <swiper-item class="swiper_lit">
    <view class="middle">
    test3
    </view>
  </swiper-item>

</swiper>

2. 显示多个滑块

• display-multiple-items

3. 循环滑动，首尾相接的循环滑动属性

• circular

基本控制参数

1. 控制当前显示的页面

当改变 current-item-id 时，页面会进行切换，<swiper-item> 的 item-id 属性一致

js: swiper_id = 't1'


wxml: 

<swiper class="detail_swiper" current-item-id="{{swiper_id}}">

     <swiper-item item-id="t1">

 

控件事件

1. 控件发生显示变化时

<swiper class="detail_swiper" bindchange="swiperChange">