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