小程序-图片轮播（swiper）

基本结构

swiper：滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
swiper-item：仅可放置在swiper组件中，宽高自动设置为100%。

轮播常用属性

• indicator-dots：是否显示面板指示点，默认false
• indicator-color：指示点颜色值
• indicator-active-color：当前选中的指示点颜色，默认#000000
• autoplay：是否自动切换，默认为false
• interval：自动切换时间间隔，默认5000
• circular：是否采用衔接滑动，即无限循环，默认为false
• duration：滑动动画时长，默认500
• bindchange：current 改变时会触发 change 事件，event.detail = {current, source}
  https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

使用示例

.swiper-container image{
  width: 100%;
  height: 100%;
}

swiper bindchange 的使用

    
        
            
                
            
        
    
    切换到了第{{pageIndex}}张

.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    pageIndex:0,
    bannerList: [
      "/images/banner_01.png",
      "/images/banner_02.png",
      "/images/banner_03.png"
    ]
  },

  /**
   * current 改变时会触发 change 事件
   * @param {*} e 
   */
  swiperChange(e) {
    this.setData({
      pageIndex: e.detail.current
    })
  },
}