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