原生JS控制手机浏览器左右滑动
问题描述:
实现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() 是禁止浏览器的默认行为,不然就会直接切换窗口

浙公网安备 33010602011771号