問題描述:
實現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() 是禁止瀏覽器的默認行為,不然就會直接切換窗口
