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

问题描述:

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

解决办法:

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

代码如下:

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

猜你喜欢

转载自blog.csdn.net/weixin_50114203/article/details/130863773
今日推荐