Swiper

1.wxml

<view>swiper组件</view>
<view class='section'>
  <view class='page-body'>
    <view class='page-section page-section-spacing swiper'>
      <swiper 
        indicator-dots="{{indicatorDots}}" 
        autoplay="{{autoplay}}" 
        interval="{{interval}}" 
        current="0" 
        duration="{{duration}}" 
        bindchange='change'
        bindanimationfinish="animationfinish">
          <block wx:for='{{background}}' wx:key='*this'>
            <swiper-item>
              <view class='swiper-item {{item}}'></view>
            </swiper-item>
          </block>
      </swiper>
    </view>
    <view class='page-section' style='marggin-top:40rpx;margin-bottom:20rpx;'>
      <view class='weui-cell weui-cell_after-title'>
        <view class='weui-cell weui-cell_switch'>
          <view class='weui-cell_bd'>指示点</view>
          <view class='weui-cell_ft'>
            <switch checked='{{indicatorDots}}' bindchange='changeIndicatorDots'></switch>
          </view>
        </view>
        <view class='weui-cell weui-cell_switch'>
          <view class='weui-cell_bd'>自动播放</view>
          <view class='weui-cell_ft'>
            <switch checked='{{autoplay}}' bindchange='changeAutoplay'></switch>
          </view>
        </view>
      </view>
    </view>
    <view class='page-section page-section-spacing'>
      <view class='page-section-title'>
        <text>幻灯片切换时长（ms）</text>
        <text class='info'>{{duration}}</text>
      </view>
      <slider bindchange='durationChange' calue='{{duration}}' min="500" max="2000"></slider>
      <view class='page-section-title'>
        <text>自动播放间隔时长（ms）</text>
        <text class='info'>{{interval}}</text>
      </view>
      <slider bindchange='intervalChange' value='{{interval}}' min="2000" max="10000"></slider>
    </view>

  </view>
</view>

2.js

Page({
  data:{
    background:[
      '.red',
      '.yellow',
      '.blue'
    ],
    indicatorDots:false,
    autoplay:false,
    vertical:false,
    interval:2000,
    duration:300
  },
  changeIndicatorDots:function(e){
    this.setData({
      indicatorDots:!this.data.indicatorDots
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange:function(e){
    this.setData({
      interval:e.detail.value
    })
  },
  durationChange:function(e){
    this.setData({
      duration:e.detail.value
    })
  }
})

3.wxss

.red{
  background: red;
  height:100%;
  width:100%;
}
.red:before{
  content: 'A';
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.yellow{
  background: yellow;
  height:100%;
  width:100%;
}
.yellow:before{
  content: 'B';
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.blue{
  background: blue;
  height:100%;
  width:100%;
}
.blue:before{
  content: 'C';
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.page-foot{
  margin-top:50rpx;
}

 

感谢：https://www.bilibili.com/video/av61418389/?p=32