微信轮播图的点击跳转

最新推荐文章于 2024-05-17 14:37:34 发布

原创最新推荐文章于 2024-05-17 14:37:34 发布 · 509 阅读

2 ·

CC 4.0 BY-SA版权

微信小程序与uniapp 专栏收录该内容

17 篇文章

订阅专栏

本文详细解析了轮播图的WXML结构，通过自定义属性data-*实现每个图片的唯一标识，并介绍了如何绑定非冒泡事件catchtap来响应用户点击，实现页面跳转。同时，展示了如何在目标页面中获取传递过来的ID参数。

情景

比如说我们写上了一个这样的轮播图结构

<swiper catchtap="carouselToDetail" indicator-dots="true" indicator-color="green" indicator-active-color="deeppink">
	<swiper-item>
		<image data-detailId="1" src='/images/detail/carousel/01.jpg'></image>
	</swiper-item>
	<swiper-item>
		<image data-detailId="0" src='/images/detail/carousel/02.jpg'></image>
	</swiper-item>
	<swiper-item>
		<image data-detailId="2" src='/images/detail/carousel/03.jpg'></image>
	</swiper-item>
	<swiper-item>
		<image data-detailId="3" src='/images/detail/carousel/04.jpg'></image>
	</swiper-item>
</swiper>

效果图
在这里插入图片描述

说明

在上图所写的结构中我们用到了一下属性

自定义属性data-*,而自定义属性一般从标签的dataset中能获取到，他可以作为每个轮播图的唯一标识
绑定了一个非冒泡事件catch

通过路径传递数据

carouselToDetail(event) {
  const id = event.target.dataset.detailid;
  wx.navigateTo({
    url: '/pages/detail/detail?id=' + id
  })
}

相应页面的处理

假设我们新建了detail页面，那么我们就应该能取出相应的id

  data:{
    index:0
  },
  onLoad:function (options) {
    this.setData({index:options.id})
  },

我们可以利用这个index发送请求或者取出数据中我们需要的数据