swiper首屏内结构元素的点击事件

swiper首屏内结构元素的点击事件,第1张

该方案可以捕捉到swiper单屏内点击不同元素的事件。常用方式使用swiper只能说判断到点击了第几屏,并不能判断点击了第几屏里的哪一个元素并传递数据触发对应事件执行。特别是首屏,因为第一屏的结构是swiper复制多出的一屏没有绑定click的方法。(此处特指循环轮播的swiper)

原因:重复点击是有冒泡事件导致的。 解决: Click me, and my parent's `onClickCapture` will fire *first*! 当点击handleClickViaCapturing事件触发时,会自动调用stopPropagation,handleClick不会执行。 只要就是 onClickCapture capture函...

首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。

<div class="swiper-container">

</div>

<!-- 如果需要分页器 -->

<div class="swiper-pagination"></div>

<!-- 如果需要导航按钮 -->

<div class="swiper-button-prev"></div>

<!-- 如果需要滚动条 -->

</div>

导航等组件可以放在container之外

思路很简单:在swiper组件内部添加两个image组件,绑定点击事件,动态改变swiper中的current值。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://www.54852.com/bake/11601687.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-17
下一篇2023-05-17

发表评论

登录后才能评论

评论列表(0条)

    保存