我经常需要将组件的 `data-*` 属性传递给组件的事件处理函数。假设,swiper 组件下的每个 swiper-item 包含了一个 image。我为每个 image 设置一个 `data-id` 属性,并在 swiper 组件上注册了一个 catchtap 事件函数(冒泡事件)。结果是,当点击图片时,`id` 属性可以传递给 catchtap 事件函数,可是点击指示点时却不能…… 


```

<swiper indicator-dots='true' autoplay='true' interval='4000' catchtap='onSwiperTap'>

<swiper-item>

  <image src='/images/a.jpg' data-id='3'></image>

</swiper-item>

<swiper-item>

  <image src='/images/b.jpg' data-id='4'></image>

</swiper-item>

<swiper-item>

  <image src='/images/c.jpg' data-id='5'></image>

</swiper-item>

</swiper>

```


```

onSwiperTap: function(event){

console.log(event);

var id = event.target.dataset.id;

var url = 'pageA/pageA?id=' + id;

wx.navigateTo({

  url: url,

})

}

```


我查看了开发文档,并没有发现相关内容的说明。另外,我在开发者社区中(https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=2fcdb7794d48c59f7624f53e94d0ae22&highline=swiper%20%E6%8C%87%E7%A4%BA%E7%82%B9) 发现以下内容:


>Q:swiper点击指示点切换是需要自己实现吗?


>A:你好,点击指示点切换的功能现已移除。因为手机上面较难点击指示点,容易误点。


如果点击指示点不需要实现特殊的功能,那么:


* 要么就设计为与点击 swiper-item 实现相同的逻辑,包括接收组件的 `data-*` 属性。


* 要么就屏蔽点击指示点来触发事件函数,指示点仅作展示用途。


不管怎样,点击指示点不能将 `data-*` 属性传递给 swiper 的事件函数,对开发者而言还是一个问题;即使在小程序真机上指示点很难点中……


我现在的解决方案是在 swiper 的事件函数中判断一下需要的组件属性否存在,再执行下一个步骤:


```

onSwiperTap: function(event){

console.log(event);

var id = event.target.dataset.id;

if(!id)

return;

var url = 'pageA/pageA?id=' + id;

wx.navigateTo({

  url: url,

})

}

```


也许是我知识上有缺漏,或者理解上有偏颇,欢迎大家交流与指教!

展开全部
收起
0回答
提交回答
  • 至过去的我

    2044人对此回答表示赞同

    我是未来的你,你现在是不是在年找寻小程序答案。你不要感觉诧异,给你来信原因,就是让你不在后悔。今天去学习如何推广小程序,相信......点击查看更多>
    发布于
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
咨询热线

13312967497

扫码添加业务即可随时咨询 还可领取小程序推广攻略

业务咨询: 13312967497
扫码咨询

扫码咨询套餐

回到顶部