vue 左右滑动手机屏幕切换路由-touch事件

手机左右滑动，切换导航
以维修记录为例，当页面偏移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';}})

vue 左右滑动手机屏幕切换路由-touch事件相关推荐

python滑动手机屏幕_appium+python自动化24-滑动方法封装（swipe）
swipe介绍 1.查看源码语法,起点和终点四个坐标参数,duration是滑动屏幕持续的时间,时间越短速度越快.默认为None可不填,一般设置500-1000毫秒比较合适. swipe(self, ...
H5 + vue 监听手机屏幕旋转及判断横竖屏
mounted () {// 监听 resize 方法window.addEventListener("resize", this.renderResize, false) }, ...
Cocos Creator Touch事件与Unity3D Touch事件
Cocos Creator Touch 事件 cc.Node 有一套完整的事件监听和分发机制.在这套机制之上,提供了一些基础的节点相关的系统事件.因此,在cocos creator中touch事件是与 ...
Vue实现的滑动切换路由组件
前言前段时间呢实现了一个模仿移动端app的通过滑动来切换路由/tab的效果,详见vuejs实现spa页面组件滑动特效.完了之后呢就在想能不能做成一个组件的形式,改进一下,抽离出来,顺便再发布到npm ...
Android的Activity屏幕切换动画(一)-左右滑动切换
为什么80%的码农都做不了架构师?>>> 这段时间一直在忙Android的项目,总算抽出点时间休息一下,准备把一些项目用到的Android经验分享一下. 在Android开发过 ...
转 Android的Activity屏幕切换动画(一)-左右滑动切换
这段时间一直在忙Android的项目,总算抽出点时间休息一下,准备把一些项目用到的Android经验分享一下. 在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍一下 ...
利用悬浮窗加PopupWindow实现从手机屏幕右边划出应用快捷切换
效果如上图所示安卓小白记录学习过程.一起交流学习.有问题请多多指出.话不多说进入正题. 一.思路首先明确需求,我们需要做一个右划弹出一个快捷切换应用的弹窗. 悬浮窗可以在其他应用上层显示出来,那么 ...
Android学习笔记之滑动翻页（屏幕切换）
如何实现手机上手动滑动翻页效果呢?呵呵,在这里我们就给你们介绍一下吧. 一般实现这个特效会用到一个控件:ViewFlipper <1>View切换的控件-ViewFlipper 这个控件是 ...
swiper的介绍以及使用（移动端滑动屏幕切换页面案例）
一.swiper介绍 Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现轮播图.触屏焦点图.触屏 ...

vue 左右滑动手机屏幕切换路由-touch事件

vue 左右滑动手机屏幕切换路由-touch事件相关推荐

最新文章

热门文章