首页 > 建站教程 > 前端框架 >  vant swipe踩坑:click和手指滑动冲突正文

vant swipe踩坑:click和手指滑动冲突

今天我爱模板网在做下面的效果时,用到了vant的swipe,

vant swipe

html代码:
<van-swipe :autoplay="3000" class="banner">
    <van-swipe-item v-for="(item,index) in banner" :key="index">
        <img :src="item.src" tapmode @click="func.openWin('banner_details_win','home/banner_details_win.html')" />
    </van-swipe-item>
</van-swipe>
这时出现了一个bug:当手指滑动swipe 的 item进行翻页时,会触发@click事件,导致下张图片刚滑动一半,就进入下一页了,百度了很久也没找到解决办法,那就自己动手,丰衣足食,其实只要分辨出是点击还是滑动,滑动一般手指在上面停留的时间比较长,而点击则很短,所以,修改代码如下:

html代码:
<van-swipe :autoplay="3000" class="banner">
    <van-swipe-item v-for="(item,index) in banner" :key="index">
        <img :src="item.src" @touchstart="clickStart" @touchend="clickEnd" />
    </van-swipe-item>
</van-swipe>
data里面定义了一个变量 howLong:
data: {
    banner:[
        {id:'1',src:'../../image/banner.png'},
        {id:'2',src:'../../image/banner.png'},
        {id:'3',src:'../../image/banner.png'},
        {id:'4',src:'../../image/banner.png'},
        {id:'5',src:'../../image/banner.png'}
    ],
    howLong:0
},
clickStart和clickEnd方法:
clickStart:function(){
    this.howLong = new Date().getTime();
},
clickEnd:function(){
    var duration = new Date().getTime() - this.howLong;
    if(duration<100){
        func.openWin('banner_details_win','home/banner_details_win.html')
    }
}
完美解决。