微信轮播图的点击跳转

情景

---

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

<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>

效果图

说明

---

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

1. 自定义属性data-*,而自定义属性一般从标签的dataset中能获取到，他可以作为每个轮播图的唯一标识
2. 绑定了一个非冒泡事件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发送请求或者取出数据中我们需要的数据