欢迎访问 如意编程网!

如意编程网

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

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

发布时间:2024/5/15 编程问答 1 豆豆
如意编程网 收集整理的这篇文章主要介绍了 微信小程序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实现轮播图,可触发点击事件的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错,欢迎将如意编程网推荐给好友。