问题描述:
实现h5页面在浏览器中,实现左右滑动进行切换图片
解决方法:
@touchstart.stop="touchstart" @touchend.stop="touchend" 滑动的方法
<div v-show="isWheel" id="main_box" class="see_big" @touchstart.stop="touchstart" @touchend.stop="touchend"> </div> touchstart(e) { e.preventDefault() // 解决方案** this.startX = e.touches[0].clientX console.log(this.startX) }, touchend(e) { e.preventDefault() // 解决方案** this.touchendX = e.changedTouches[0].clientX var endX = this.touchendX - this.startX console.log(endX) if (endX > 40) { if (this.imgSrc > 0) { this.imgSrc-- console.log(this.imgSrc) this.bgsrc = this.imgArr[this.imgSrc] } } else if (endX < -40) { if (this.imgSrc < this.imgArr.length - 1) { this.imgSrc++ console.log(this.imgSrc) this.bgsrc = this.imgArr[this.imgSrc] } } },
* e.preventDefault() 是禁止浏览器的默认行为,不然就会直接切换窗口