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') } }完美解决。