微信小程序 轮播图单击获取当前轮播对象索引(只在父元素上绑定事件)

轮播广告 给父元素绑定点击事件,点击子元素冒泡触发,获取当前轮播对象索引值(该方法旨在学习,开发中不可取,因为频繁setData可能会带来性能问题)

具体实现方法
父元素绑定change事件和tap事件,属性current做数据绑定。

原理:swiper的current属性自动记录当前轮播对象索引,默认值为0,每次轮播切换,current值也会对应改变,且会触发change事件,在change事件处理函数中通过e.detail.current获取索引值,再通过setData()赋给data中的变量current,这样我们就可以通过读取current知道当前的轮播对象是谁了。

这里我在tap事件处理函数getIndex中打印了索引值,结果完全符合我们的要求。

事件绑定

<swiper  current="{
  {current}}"  bindchange="getCurrent"   bindtap="getIndex">
	 <swiper-item>
	    <image src="../../assets/imgs/1.jpg"></image>
	 </swiper-item>
</swiper>

数据

data: {
    current:0  //默认值为0
  }

change事件处理函数

getCurrent:function(e){
    var cur = e.detail.current;    //
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值