vant UI 轮播组件swiper 滑动时触发click点击事件

这篇具有很好参考价值的文章主要介绍了vant UI 轮播组件swiper 滑动时触发click点击事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题描述:

vant轮播图组件,前端,javascript,开发语言

 如图 我是用轮播图做了一个答题卡分页 但是 出现了 滑动轮播图时自动触发了数字点击的事件

解决办法:

1.在van-swipe标签添加 lazy-render属性,实现图片懒加载,懒加载模式下,只会渲染当前页和下一页。
2..在van-swipe标签添加 :stop-propagation="false" 属性,阻止滑动事件冒泡,避免了滑动触发click事件

代码如下:文章来源地址https://www.toymoban.com/news/detail-722278.html

<van-swipe @change="changeSwiper" class="my-swipe list inter-card-list"
      indicator-color="#D8D8D8" :loop="false" :initial-swipe="initialSwipe" :stop-propagation="false">
        <van-swipe-item v-for="i in totalPage" :key="i">
          <span class="li"
            :class="item.commit_answer?item.commit_answer==item.question_answer_content?'right':'wrong':''"
            v-for="(item) in list" :key="item.index"
            @click.stop="choseItem(item.index)">
            {{item.index + 1}}
          </span>
        </van-swipe-item>
      </van-swipe>

到了这里,关于vant UI 轮播组件swiper 滑动时触发click点击事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包