想实现的功能:点击list页面的轮播图会跳转到相应的detail页面
使用事件委托的方式,给父元素swiper添加点击事件catchtap='carouselToDetail'
data-index='0':给点击事件的回调函数传index过去
<swiper catchtap='carouselToDetail' indicator-dots='true' indicator-color='red' indicator-active-color='yellow' autoplay='true'>
<swiper-item>
<image data-index='0' src='/images/detail/carousel/1.jpg'></image>
</swiper-item>
<swiper-item>
<image data-index='1' src='/images/detail/carousel/2.jpeg'></image>
</swiper-item>
<swiper-item>
<image data-index='2' src='/images/detail/carousel/3.jpg'></image>
</swiper-item>
<swiper-item>
<image data-index='3' src='/images/detail/carousel/4.png'></image>
</swiper-item>
</swiper>
list.js
//点击轮播图跳转
carouselToDetail(event){
console.log(event);
},
可以看到传过来的index是放到了target中,因为是swiper中的image触发的,不是swiper本身触发的
如果向下面这样子把data-index='0'放到swiper中,由它自身触发,index就会放到currentTarget中
打印结果
currentTarget和target的区别:
target指向的是触发事件的元素currentTarget指向的是捕获事件的元素(也就是元素自身)
好了,把data-index='0'改回来放到image中,继续写我们的跳转
//点击轮播图跳转
carouselToDetail(event){
let index = event.target.dataset.index
wx.navigateTo({
url: '/pages/detail/detail?index=' + index,
})
},
这样就能成功跳转了
本文介绍如何通过事件委托的方式,在小程序中实现点击轮播图跳转至详情页的功能。详细解释了如何利用data-index属性传递图片索引,并通过事件对象获取该索引以完成页面跳转。
2433

被折叠的 条评论
为什么被折叠?



