微信小程序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"/>