微信小程序swiper滑动页面

基本属性

属性名 类型 默认值 说明 最低版本
indicator-dots Boolean false 是否显示面板指示点
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色 1.1.0
indicator-active-color Color #000000 当前选中的指示点颜色 1.1.0
autoplay Boolean false 是否自动切换
current Number 0 当前所在页面的 index
interval Number 5000 自动切换时间间隔
duration Number 500 滑动动画时长
circular Boolean false 是否采用衔接滑动
bindchange EventHandle current 改变时会触发 change 事件，event.detail = {current: current}

WXML

<view>  <text>swiper展示</text>  <!-- 1,是否显示面板指示点  2,是否自动切换  3,自动切换时间间隔 4,滑动动画时长-->  <swiper  indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' interval='{{interval}}' duration='{{duration}}'>    <block wx:for="{{imgUrls}}">      <swiper-item>        <image src="{{item}}" />      </swiper-item>    </block>  </swiper></view>

JS

Page({  /**   * 页面的初始数据   */  data: {    imgUrls:[      '../../imags/test.png',      '../../imags/test-shouye.png',      '../../imags/test02.jpg'    ],    indicatorDots:true,    autoplay:true,    interval:1000,    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.data.value    })  },  durationChange:function(e){    this.setData({      duration:e.data.value    })  })

效果图如下: