美文网首页
Vant UI 轮播组件swipe遇到的问题

Vant UI 轮播组件swipe遇到的问题

作者: 第二心跳 | 来源:发表于2023-03-27 21:35 被阅读0次
    问题描述:

    页面加载完,轮播图不能手动向右滑动,会触发click事件,或者图片卡顿展示两个图片各一半

    解决办法:

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

    代码如下:

         <van-swipe class="banner-swipe" :autoplay="3000"  indicator-color="white" showIndicators
            lazy-render 
            :stop-propagation="false"
          >
             <van-swipe-item v-for="(item, index) in bannerList" :key="index" @click="toBanner(item)">
                 <img :src="item.picture | getImgPath" alt="" />
             </van-swipe-item>
         </van-swipe>
    

    相关文章

      网友评论

          本文标题:Vant UI 轮播组件swipe遇到的问题

          本文链接:https://www.haomeiwen.com/subject/gcazrdtx.html