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

2023-03-27  本文已影响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>
上一篇 下一篇

猜你喜欢

热点阅读