版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30211165/article/details/79968609
Swiper轮播页组件
属性
indicator-dots:是否现实面板知识点(小店)
indicator-color:知识点颜色
Indicator-active-color:当前选中的指试点颜色
autoplay:是否自动播放
current:当前所在滑块的index
Current-item-id:当前所在滑块的item-id不能与current同时制定
interval:自动切换时间间隔
duration:滑动动画时常
bindchange:current改变时会触发change事件e.datall={current.current}
item-id:组件内容
wxxml代码
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{swiperCurrent}}" bindchange="swiperChange">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image"bindtap="swipclick" />
</swiper-item>
</block>
</swiper>
备注:current="{{swiperCurrent}}当前index bindchange="swiperChange”:current变化时会触发我们可以在这里面得到当前index标示 <block wx:for="{{imgUrls}}">循环,imgUrls是定义的图片数组。 bindtap="swipclick”图片点击事件
wxss代码
/*轮播页*/
.swiper {
height: 400rpx;
width: 100%;
}
.swiper-image {
height: 100%;
width: 100%;
}
.slide-image{
height: 100%;
width: 100%;
}
index.js代码
Page({
data: {
//轮播页数组
imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
//是否显示指适点
indicatorDots: true,
//是否轮播
autoplay: true,
//
interval: 5000,
duration: 1000,
inputShowed:false,
inputVal:"",
//轮播页当前index
swiperCurrent:0,
},
//轮播图的切换事件
swiperChange: function (e) {
this.setData({
swiperCurrent: e.detail.current
})
},
//轮播图点击事件
swipclick: function (e) {
console.log(this.data.swiperCurrent)
},
});