【Kevin Learn 小程序】--＞swiper

效果图

属性

参考：swiper

实例

1. app.js

//app.js
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false
  }
})

2. app.json

{
  "pages": [
    "pages/swiper/swiper"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3. swiper.wxml

<!--pages/swiper/swiper.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}}"
                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="margin-top: 40rpx;margin-bottom: 0;">
            <view class="weui-cells weui-cells_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" />
                    </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" />
                    </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" value="{{duration}}" min="500" max="2000" />
            <view class="page-section-title">
                <text>自动播放间隔时长(ms)</text>
                <text class="info">{{interval}}</text>
            </view>
            <slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000" />
        </view>
    </view>
</view>

4. swiper.wxss

/* pages/swiper/swiper.wxss */
button{
  margin-bottom: 30rpx;
}
button:last-child{
  margin-bottom: 0;
}
.page-body {
    width: 100%;
}
.page-section-title{
  padding: 0;
}
.swiper-item{
  display: block;
  height: 150px;

}
.page-section-title{
  margin-top: 60rpx;
  position: relative;
}
.info{
  position: absolute;
  right: 0;
  color: #353535;
  font-size: 30rpx;
}
.page-foot{
  margin-top: 50rpx;
}
.demo-text-1{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #1AAD19;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-1:before{
  content: 'A';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-2{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #2782D7;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-2:before{
  content: 'B';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-3{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #F1F1F1;
  color: #353535;
  font-size: 36rpx;
}
.demo-text-3:before{
  content: 'C';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

5. swiper.js

Page({
  data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 300
  },
  /**
   * swiper api
   */
  changeIndicatorDots: function (e) {
    console.log('切换指示点开关');
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function (e) {
    console.log('切换自动播放开关');
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    console.log(`调整自动播放间隔时长为: ${e.detail.value}ms`);
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    console.log(`调整幻灯片切换时长为: ${e.detail.value}ms`);
    this.setData({
      duration: e.detail.value
    })
  },
  animationfinish: function (e) {
    console.log(e);
  },
  change: function (e) {
    console.log(e)
  }
})

6. swiper.json

{
  "navigationBarTitleText": "swiper组件"
}