【转】小程序-广告轮播/控制属性
微信小程序广告轮播元素<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;
}
页面效果：
