微信小程式輪播圖(詳細)
阿新 • • 發佈:2020-12-19
技術標籤:微信小程式javascripthtmlcss3小程式
微信小程式輪播圖
效果圖
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%;
}
js:
data: {
current: 0, //當前所在頁面的 index
indicatorDots: true, //是否顯示面板指示點
autoplay: true, //是否自動切換
interval: 3000, //自動切換時間間隔
duration: 800, //滑動動畫時長
circular: true, //是否採用銜接滑動
imgUrls: [
'http://1027145.user-website5.com/yizhan/images-2/banner1.jpg',
'http://1027145.user-website5.com/yizhan/images-2/banner2.jpg',
'http://1027145.user-website5.com/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]
})
}