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

微信小程序广告轮播元素<swiper></swiper>  图片所在元素<swiper-item>/swiper-item>

其中属性有：

1 2 3 4 5 6 7 8 9 10

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:

1 2 3 4 5 6 7 8 9

广告轮播/手动滑动 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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

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:　　

1 2 3 4

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

　　

页面效果：