微信小程序之swiper

微信小程序每个页面都要三个文件：js、wxml、wxss

swiper相当于循环滚动视图适合广告位等展示。

1.swiper.wxml

<view class="page">
  <view class="page__hd">
    <text class="page__title">swiper</text>
    <text class="page__desc">swiper</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap swiper">
      <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}">
          <swiper-item>
            <view class="swiper-item bc_{{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="btn-area">
      <button type="default" bindtap="changeIndicatorDots">indicator-dots</button>
      <button type="default" bindtap="changeVertical">{{vertical?'horizontal':'vertical'}}</button>
      <button type="default" bindtap="changeAutoplay">autoplay</button>
    </view>
    <slider bindchange="durationChange" value="{{duration}}" show-value min="500" max="2000"/>
    <view class="section__title">duration</view>
    <slider bindchange="intervalChange" value="{{interval}}" show-value min="2000" max="10000"/>
    <view class="section__title">interval</view>
  </view>
</view>

#######changeIndicatorDots是点击事件是否展示dots
#######changeVertical 是点击事件是否竖向、横向
#######changeAutoplay 是时间是否自动滚动
#######durationChange 改变持续时间
#######intervalChange 改变间隔时间
#######点击事件具体实现在js中代码。

2.swiper.js

Page({
  data: {
    background: ['green', 'red', 'yellow'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 3000,
    duration: 1200
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeVertical: function (e) {
    this.setData({
      vertical: !this.data.vertical
    })
  },
  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
    })
  }
})

#######在页面上绑定的事件变化具体时间在这个js实现。

3.swiper. wxss

.swiper-item{
  display: block;
  height: 150px;
}
.page {
  background-color: #fbf9fe;
  height: 100%;
}
.btn-area{
    padding: 0 30px;
}
.section__title{
    margin-bottom: 16rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
}
.section_gap .section__title{
    padding-left: 0;
    padding-right: 0;
}
.section{
    margin-bottom: 80rpx;
}
.section_gap{
    padding: 0 30rpx;
}

#######页面所需要的css。

效果展示.png

demo地址

https://github.com/miaozhang9/WeAppDemo