问题描述:
页面加载完,轮播图不能手动向右滑动,会触发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>
网友评论