微信小程序轮播图Swiper

说明：

在根目录下，新建一个文件夹，跟Pages平行，拖动4张图片到文件夹

swiper 有四个属性比较重要：
      indicator-dots： boolean类型，是否显示指示器
      autoplay： boolean类型，是否设置自动播放
      interval： int类型，设置banner之前图片的切换时间间隔
      duration： int类型，设置banner之前图片的切换速度

布局：

布局样式：

/* pages/swiperdemo/swiperdemo.wxss */

.home-swiper {
  width: 95%;
  height: 360rpx;
}

.slide-image {
  width: 100%;
  height: 100%;
}

设置轮播图片，轮播时间：

Page({
  data: {
    autoplay: true,
    interval: 3000,
    duration: 1200
  },
  onLoad: function () {
    var that = this
    var data = {
      "datas": [{
          "id": 1,
          "imgurl": "../../images/ba.png"
        },
        {
          "id": 2,
          "imgurl": "../../images/bb.png"
        },
        {
          "id": 3,
          "imgurl": "../../images/bc.png"
        },
        {
          "id": 4,
          "imgurl": "../../images/bd.png"
        }
      ]
    };
    that.setData({
      lunboData: data.datas
    })
  },
})

 

效果图：

 

修改一下官方给的demo

地址：

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

布局

	
	
	  
	  
	  
	
	
	
	
	
	
	指示点
	
	
	
	
	
		自动播放
		
		
		
		
	
	
	
		
		幻灯片切换时长(ms)
		{{duration}}
		
		
		
		自动播放间隔时长(ms)
		{{interval}}
		
		
		
	

图片地址：

Page({
  data: {
    indicatorDots: true,
    vertical: true,
    autoplay: true,
    interval: 2000,
    duration: 500
  },
  onLoad: function () {
    var that = this
    var data = {
      "datas": [{
          "id": 1,
          "imgurl": "../../images/ba.png"
        },
        {
          "id": 2,
          "imgurl": "../../images/bb.png"
        },
        {
          "id": 3,
          "imgurl": "../../images/bc.png"
        },
        {
          "id": 4,
          "imgurl": "../../images/bd.png"
        }
      ]
    };
    that.setData({
      lunboData: data.datas
    })
  },

  changeIndicatorDots() {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },

  changeAutoplay() {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },

  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },

  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

效果图：