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


   
       
           
       

   








你可能感兴趣的:(微信小程序)