小程序-广告轮播/控制属性

【转】小程序-广告轮播/控制属性

微信小程序广告轮播元素<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;
}

页面效果：

原文地址：https://www.cnblogs.com/liyuspace/p/8213585.html