⼩程序轮播图⼩程序轮播图⼀般⽤swiper组件制作，在⽂档中是指：滑块视图容器
它的属性如下：
eq:
wxml:
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
wxss:
swiper {
height: 400rpx;
width: 100%;
}
swiper-item {
height: 100%;
width: 100%;
}
.slide-image{
height: 100%;
width: 100%;
}
wxjs:
data: {
current: 0,  //当前所在页⾯的 index
indicatorDots: true, //是否显⽰⾯板指⽰点
autoplay: true, //是否⾃动切换
interval: 3000, //⾃动切换时间间隔
duration: 800, //滑动动画时长
circular: true, //是否采⽤衔接滑动
imgUrls: [
'1027145.user-website5/yizhan/images-2/banner1.jpg',
免费小程序制作
'1027145.user-website5/yizhan/images-2/banner2.jpg',
'1027145.user-website5/yizhan/images-2/banner3.jpg'
],
links: [
'/pages/second/register',
'/pages/second/register',
'/pages/second/register'
]
},
//轮播图的切换事件
swiperChange: function(e) {
this.setData({
swiperCurrent: e.detail.current
})
},
//点击指⽰点切换
chuangEvent: function(e) {
this.setData({
swiperCurrent: e.currentTarget.id
})
},
//点击图⽚触发事件
swipclick: function(e) {
console.log(this.data.swiperCurrent);
wx.switchTab({
url: this.data.links[this.data.swiperCurrent]    })
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。