vue 左右滑动手机屏幕切换路由-touch事件
手机左右滑动,切换导航以维修记录为例,当页面偏移50px而且手离开屏幕时,路由相应切换var router = this.$router;this.$refs.maintain.addEventListener('touchstart', (e) => {this.startX =e.touches[0].pageX;})...
·
手机左右滑动,切换导航
以维修记录为例,当页面偏移50px而且手离开屏幕时,路由相应切换
var router = this.$router;
this.$refs.maintain.addEventListener('touchstart', (e) => {
this.startX = e.touches[0].pageX;
})
this.$refs.maintain.addEventListener('touchmove', (e) => {
var moveEndX = e.changedTouches[0].pageX;
var X = moveEndX - this.startX;
this.$refs.maintain.style.position='relative';
if ( X < -50 ) {//左滑
this.$refs.maintain.style.left=X+'px';
}if(X>50){//右滑
this.$refs.maintain.style.left=X-50+'px';
}
})
this.$refs.maintain.addEventListener('touchend', (e) => {
if ( this.$refs.maintain.offsetLeft < -50) {
router.push('./inspect')
}
if(this.$refs.maintain.offsetLeft > 50){
router.push('./equip')
}
else{
this.$refs.maintain.style.left=0+'px';
}
})
更多推荐
已为社区贡献18条内容
所有评论(0)