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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值