實現(xiàn)微信小程序輪換圖切換，點擊獲取圖片url,獲取當(dāng)前位置

1、index.js

Page({??

? ? data: {
? ? ? ? autoplay: true,
? ? ? ? dotsBoll: false,
? ? ? ? interval: 2000,
? ? ? ? duration: 1000,
? ? ? ? current:0,
? ? ? ? imageUrls: [
? ? ? ? ? ? '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'
? ? ? ? ]
? ? },
? ? intervalChange: function (e) {//自動切換時間間隔
? ? ? ? this.setData({
? ? ? ? ? ? interval: e.detail.value
? ? ? ? })
? ? },
? ? durationChange: function (e) {//滑動動畫時長
? ? ? ? duration: e.detail.value
? ? },
? ? changeIndicatorDots: function (e) {//是否顯示小圓圈
? ? ? ? this.setData({
? ? ? ? ? ? dotsBoll: !this.data.dotsBoll
? ? ? ? })
? ? },
? ? changeAutoplay: function (e) {//是否自動播放
? ? ? ? this.setData({
? ? ? ? ? ? autoplay: !this.data.autoplay
? ? ? ? })
? ? },
? ? swipclick: function (e) {//點擊圖片觸發(fā)事件
? ? ? ? console.log(this.data.imageUrls[this.data.current]);
? ? },
? ? bindchange:function(e){//輪播圖發(fā)生改變
? ? ? ? this.setData({
? ? ? ? ? ? current:e.detail.current
? ? ? ? })
? ? }
})

2、index.wxml

<swiper indicator-dots="{{dotsBoll}}" interval="{{interval}}" duration="{{duration}}" autoplay="{{autoplay}}" bindchange="bindchange">
? ? <block wx:for-items="{{imageUrls}}">
? ? ? ? <swiper-item >
? ? ? ? ? ? <image src="{{item}}" height="150" width="355" bindtap="swipclick"></image>
? ? ? ? </swiper-item>
? ? </block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/>
<slider bindchange="durationChange" show-value min="1000" max="10000"/>

總結(jié)

以上是生活随笔為你收集整理的微信小程序swiper实现轮播图，可触发点击事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。