Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
258 views
in Technique[技术] by (71.8m points)

vue引用vant中swipe组件bug。

项目中引入了vant,在使用swipe组件时,参数loop设置为了false。根据文档中loop参数功能是是否开启循环播放,默认为true。

项目中也设置了loop=false;
<van-swipe :loop="false" @change="changeSwipe" ref="swipe"></van-swipe>
但是还是会存在切换到最后一个容器还可以接着切换swipe的情况,请问有没有遇到过这种bug?该如何解决


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

可以尝试以下方案,我在项目里这么做的,目前可行,供参考下:
第一步:记录初始化和每次 change 时的当前 siwpeIndex。
第二步:在绑定的 change 事件里,通过 ref 可以获取到 Swipe 实例,然后获取实例里的 deltaX属性值(值为正值,表示左滑;值为负值,表示右滑)。
第三步:如果当前 siwpeIndex为最后一个内容,且deltaX值为负时,调用siwpeTo() 方法重定向到最后一个轮播内容。
具体来说,是在 siwpe 绑定的change事件里如下

if(this.swipeIndex==(this.siwpeData.length-1)&&this.$refs.mySwipe.deltaX<0){
                this.$refs.mySwipe.swipeTo(this.swipeIndex,{immediate:false});
            }

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...