vue公众号项目中的橡皮筋效果

上代码

先定义两个事件，作用都写清楚了

// 滑动开始获取初始位置坐标touchstartFunction (e) {this.startY = e.touches[0].pageY;},// 监听手指滑动事件touchmoveFunction (e) {let el = document.querySelector('.sympt_part');// 需要滑动的dom元素这个为包裹滑动元素的父元素if (!e.isSCROLL) {e.preventDefault(); // 阻止默认事件(上下滑动)console.log('阻止了');} else {// 需要滑动的区域let moveY = e.touches[0].pageY;let top = el.scrollTop;let ch = el.clientHeight;// 对象最顶端和窗口最顶端之间的距离let scrollH = el.scrollHeight; // 含滚动内容的元素大小if ((top === 0 && moveY > this.startY) || (top + ch === scrollH && moveY < this.startY)) {e.preventDefault();console.log('阻止了');} else {console.log('开启了');}}},

生命周期里

 let ios = navigator.userAgent.indexOf('iphone');// 判断是否为ios// 获取触摸坐标let _this = this;document.body.addEventListener('touchstart', _this.touchstartFunction, { passive: false });//if (ios === -1) {// ios下运行let el = document.querySelector('.sympt_part');// 需要滑动的dom元素iosTrouchFn(el);}function iosTrouchFn (el) {// el需要滑动的元素el.addEventListener('touchmove', function (e) {e.isSCROLL = true;});document.body.addEventListener('touchmove', _this.touchmoveFunction, { passive: false }); // passive防止阻止默认事件不生效}

记得结束阶段去掉监听

 beforeDestroy () {let _this = this;document.body.removeEventListener('touchstart', _this.touchstartFunction, { passive: false });document.body.removeEventListener('touchmove', _this.touchmoveFunction, { passive: false });}

原理是监听可滚动区域滚动位置，到顶或者到底preventDefault
这个阻止直接写使用在不可能出现滑动的页面，很少这种情况

tips：
如果报touchmove操作失败的错可以同级css里面加上touch-action:none意思是禁止或显示默认菜单等于none会不能滚动，还可以在js里面判断!!e.cancelable

vue公众号项目中的橡皮筋效果相关推荐

javaweb开发微信公众号项目中怎么使用WEUI
前言使用java对微信公众号进行代码开发,关于前端实现则使用微信开发好的WEUI样式框架,那么具体怎么在项目中引入和适用WEUI,在网上找了好多资料,很多都是用在小程序上,并没有找到java上面的, ...
php如何在微信公众号项目中，跳转到公众号关注页面
早期使用公众号原始ID的方式已经失效,经本人测试目前可用的方法为:header("Location:https://mp.weixin.qq.com/mp/profile_ext?actio ...
「2022 最新版」未认证微信公众号图文中插入外部链接教程
如何在微信公众号图文中插入外部链接呢?作为一名公众号小编,领导经常要求在图文中直接访问外部链接,但是由于微信平台的限制,公众号图文中不允许直接访问外链,只能插入其他公众号文章的链接. 现在,可以通过小 ...
微信公众号文章中如何添加附件？
公众号文章中添加附件在公众号文章中插入附件,可供粉丝用户一键查看并下载,支持"doc"."docx"."xls"."xlsx&q ...
如何在公众号文章中添加申请表（Word文档）
在运营学校公众号时,有时候因为校务需要,需要在公众号文章中添加一些申请表附件,给学生下载用于申请学校资源(如多媒体教室,篮球场等).附件一方面要求方便下载,另一方面还要保留其原有的内容与格式,因为公众 ...
操作国学公众号项目，半年涨粉30万
微信公众号项目,发现里面的奥妙很多,越研究,越觉得这些项目的操盘手,对人性理解的深刻. 我们看到的每个公众号都有各种运营模式,真为他们得流程设计,叹为观止. 今天笔者分析讲解的是微信公众号里边的暴利项 ...
【新】如何在微信公众号图文中插入外链
由于微信平台的限制,公众号图文中不允许插入外链,只能插入其他公众号图文链接或者小程序链接这使得微信成为一个封闭的平台,和互联网开放自由的理念相悖,不利于内容的分享为了解决这个问题,我搞了一款可 ...
c语言编程微信公众号图片直播,如何以图片的形式在微信公众号文章中添加小程序...
如何以图片的形式在微信公众号文章中添加小程序微信公众号中想要将自己的小程序也放进去,宣传宣传,该怎么添加?下面百分网小编带大家一起来看看详细操作教程,感兴趣的朋友一起学习吧!!!想了解更多相关信息请 ...
微信公众号文章中的音乐怎么设置自动播放
1.搜微信公众号登录,点网"微信公众号官网". 微信公众号文章中的音乐怎么设置自动播放? 2.点新建群发. 微信公众号文章中的音乐怎么设置自动播放? 3.进入新建群发,在正文里输入 ...

vue公众号项目中的橡皮筋效果

上代码

vue公众号项目中的橡皮筋效果相关推荐

最新文章

热门文章