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

今天我爱模板网在做下面的效果时，用到了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')
    }
}

完美解决。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！