问题描述:
如图 我是用轮播图做了一个答题卡分页 但是 出现了 滑动轮播图时自动触发了数字点击的事件
解决办法:
1.在van-swipe标签添加 lazy-render属性,实现图片懒加载,懒加载模式下,只会渲染当前页和下一页。
2..在van-swipe标签添加 :stop-propagation="false" 属性,阻止滑动事件冒泡,避免了滑动触发click事件文章来源:https://www.toymoban.com/news/detail-722278.html
代码如下:文章来源地址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模板网!