微信小程序——【一】视图容器（view,scroll-view,swiper）之swiper组件（滑块视图容器）

swiper

滑块视图容器。其中只可放置< swiper-item >组件，否则会导致未定义的行为。

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
autoplay	boolean	false	是否自动切换
indicator-dots	boolean	false	是否显示面板指示点
interval	number	5000	自动切换时间间隔
duration	number	500	滑动动画时长

swiper.wxml文件

<view class="container">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="{{slide-image}}"/>
      </swiper-item>
    </block>
  </swiper>

  <view>
    <button type="primary" bindtap="changeIndicatorDots">indicator-dots</button>
    <button type="primary" bindtap="changeAutoplay">autoplay</button>
  </view>

  <view>
    <slider bindchange="intervalChange" show-value min="500" max="2000"/>interval
    <slider bindchange="durationChange" show-value min="1000" max="10000"/>duration
  </view>

</view>

swiper.js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgurls:[
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ],
    indicatorDots:false,
    autoplay:false,
    interval:5000,
    duration:1000
  },
  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
    })
  }
})

效果图