【轉】小程序-廣告輪播/控制屬性

微信小程序廣告輪播元素<swiper></swiper> 圖片所在元素<swiper-item>/swiper-item>

其中屬性有：

 autoplay:true,//是否自動播放
    autoplaytxt:"停止自動播放",
    indicatorDots: true,//指示點
    // indicator-color："white",//指示點顏色 暫未啟動
    // indicator-active-color："red",//當前選中的指示點顏色暫未啟動
    indicatorDotstxt:"隱藏指示燈",
    interval: 1000,//圖片切換間隔時間
    duration: 500,//每個圖片滑動速度,
    circular:true,//是否采用銜接滑動
    current:3,//初始化時第一個顯示的圖片 下標值（從0）index

　　圖片更改事件：bindchange=‘imgchange‘ imagechange()的e.detail.current為當前顯示頁面的下標值

例子如下：

wxml:

廣告輪播/手動滑動 swiper
<swiper bindchange="imgchange" indicatorDots=‘{{indicatorDots}}‘ current=‘{{current}}‘ autoplay=‘{{autoplay}}‘ interval=‘{{interval}}‘duration=‘{{duration}}‘ circular=‘{{circular}}‘>
	<block wx:for=‘{{imgUrls}}‘>
	<swiper-item>
		<image style="" mode="" src="{{item}}" binderror="" bindload="" class=‘swiper-img‘></image>
	</swiper-item>
	</block>
</swiper>
<button  bindtap="autoplaychange" >{{autoplaytxt}}</button>

　　wxjs:

Page({
  data: {
    imgUrls: [
      ‘../../img/3.jpg‘,//圖片src
      ‘../../img/6.jpg‘,
      ‘../../img/5.jpg‘,
      ‘../../img/4.jpg‘
    ],
    autoplay:true,//是否自動播放
    autoplaytxt:"停止自動播放",
    indicatorDots: true,//指示點
    // indicator-color："white",//指示點顏色 暫未啟動
    // indicator-active-color："red",//當前選中的指示點顏色暫未啟動
    indicatorDotstxt:"隱藏指示燈",
    interval: 1000,//圖片切換間隔時間
    duration: 500,//每個圖片滑動速度,
    circular:true,//是否采用銜接滑動
    current:3,//初始化時第一個顯示的圖片 下標值（從0）index

  },
  autoplaychange:function(event){//停止、播放按鈕

    if (this.data.autoplaytxt=="停止自動播放") {
      this.setData({
        autoplaytxt:"開始自動播放",
        autoplay:!this.data.autoplay
      })
    }else{
       this.setData({
        autoplaytxt:"停止自動播放",
        autoplay:!this.data.autoplay
      })
    };
   
  },
  imgchange:function(e){//監聽圖片改變函數
console.log(e.detail.current)//獲取當前顯示圖片的下標值
  }
})

wxss:　　

.swiper-img{
	width: 100%;
	height: 500rpx;
}

頁面效果：

小程序-廣告輪播/控制屬性