微信小程序swiper实现轮播图，可触发点击事件

实现微信小程序轮换图切换，点击获取图片url,获取当前位置

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) {//点击图片触发事件
        console.log(this.data.imageUrls[this.data.current]);
    },
    bindchange:function(e){//轮播图发生改变
        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"/>

总结

以上是生活随笔为你收集整理的微信小程序swiper实现轮播图，可触发点击事件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。