便利贴--17{移动端滑动模块}

id

动态绑定高度

<div id="mobileActivity" :style="{ height: height + 'px' }">

使用方法

 this.domMove = new moveWindow({id: "mobileActivity",minHeight: that.useHeight,critical: 100,fn: function (res) {that.height = res.height;// console.log(res.height);if (res.state != "on") {that.openValue = res.state;}},}).init();

class

class moveWindow {constructor(data) {this.id = data.id;this.start = 0;this.end = 0;this.domHeight = 0;this.domMove = null;this.openValue = false;this.useHeight = data.minHeight;this.height = data.minHeight;this.critical = data.critical;let that = this;this.fn =data.fn ||function (res) {console.log("未设置回调函数");console.log(res);};this.ListenerTouchmove = function (window) {let moseHeight = window.changedTouches[0].clientY;//   let windowHeight = document.body.clientHeight; //屏幕宽度let endOn = moseHeight;let cha = +that.start - +endOn;//   let cha = windowHeight - moseHeight;//   console.log(window);//   if (cha >= windowHeight / 2) {//     cha = windowHeight / 2;//   } else if (cha <= that.useHeight) {//     cha = that.useHeight;//   }let d = {state: "on",height: +that.domHeight + cha,};that.fn(d);};this.ListenerTouchstart = function (window) {let moseHeight = window.changedTouches[0].clientY;that.start = moseHeight;that.domHeight = document.getElementById(that.id).style.cssText.split("px")[0].split("height:")[1];};this.ListenerTouchend = function (window) {let moseHeight = window.changedTouches[0].clientY;that.end = moseHeight;let cha, states;if (that.end >= that.start) {states = false;cha = that.end - that.start;} else {states = true;cha = that.start - that.end;}//   console.log(that.start, that.end);//   console.log(cha);if (cha >= that.critical) {//高that.opens(states);} else if (cha < that.critical) {//低that.opens(states);}};return this;}//启动监听事件init() {this.domMove = document.getElementById(this.id);this.domMove.addEventListener("touchmove", this.ListenerTouchmove);// 结束位置靠滑动距离判断this.domMove.addEventListener("touchstart", this.ListenerTouchstart);this.domMove.addEventListener("touchend", this.ListenerTouchend);}//关闭监听事件closeInit() {this.domMove = document.getElementById(this.id);this.domMove.removeEventListener("touchmove", this.ListenerTouchmove);// 结束位置靠滑动距离判断this.domMove.removeEventListener("touchstart", this.ListenerTouchstart);this.domMove.removeEventListener("touchend", this.ListenerTouchend);}//输出事件opens(val) {this.openValue = val;if (val) {let windowHeight = document.body.clientHeight;this.height = windowHeight / 2;} else {this.height = this.useHeight;}let d = {state: this.openValue,height: this.height,};this.fn(d);}// 结束位置是一半判断//  domMove.addEventListener("touchend", function (window) {//   let moseHeight = window.changedTouches[0].clientY;//   let windowHeight = document.body.clientHeight;//   let cha = windowHeight - moseHeight;//   console.log(cha, "最后位置");//   let centerPoint =//     (windowHeight / 2 - +that.useHeight) / 2 + +that.useHeight;//   if (cha >= centerPoint) {//     cha = windowHeight / 2;//   } else if (cha < centerPoint) {//     cha = that.useHeight;//   }//   that.height = cha;// });
}export default moveWindow;

便利贴--17{移动端滑动模块}相关推荐

便利贴--23{移动端滑动模块-改良}
便利贴--23{移动端滑动模块-改良} 效果之前那个只适用于之前的项目,这个可以自定义项目使用效果之前那个只适用于之前的项目,这个可以自定义项目在这里可以编写切面函数,直接区分内部事务和外部 ...
便利贴--25{uniapp移动端滑动模块-因为uniapp打包后没有window，所以要另外去做监听和触控事件的传递}
便利贴--25{uniapp移动端滑动模块-因为uniapp打包后没有window,所以要另外去做监听和触控事件的传递} 效果![请添加图片描述](https://img-blog.csdnimg.c ...
bootstrap轮播如何支持移动端滑动手势
1.下载滑动手势 js 插件:hammer.js //cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js 2.写一个javascript命令调用hammer.j ...
B端会员模块的思考与设计
本文由作者阿井于社区发布当前,互联网产品的商业化模式主要有付费会员.广告投放(如谷歌.百度.头条的广告投放).佣金抽成(淘宝.京东等平台). 其中付费会员越来越成为企业商业化产品的主流.特别是在 ...
解决移动端滑动方向相反
解决移动端滑动方向相反安卓移动端滑动时,手指没离开屏幕时滑动正常,手指一离开屏幕就往反方向滑,ios是没有问题的. 解决方案:检查列表盒子的overflow:hidden属性,去除即刻.
ios移动端滑动抖动的bug
ios 端滑动抖动bug 在安卓上不会有问题,在ios 上滑动出现抖动情况先上图类似这种滑动出现,目前有几种可能会影响: 1.蒙层fixed定位,子盒子在用fixed定位会出现这个情况.解决办法就 ...
seajs引入html,SeaJS：一个适用于 Web 浏览器端的模块加载器
什么是SeaJS? SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容.在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Defini ...
douyin web端滑动，点选验证码分析
仅用在学习交流,如有侵权,联系删除. 仅用在学习交流,如有侵权,联系删除. 仅用在学习交流,如有侵权,联系删除. 当前douyin web端,请求cookie中有两个很重要的参数,一个就是s_v_we ...
js---PC端滑动进度条
这个是PC端的滑动进度条效果: <!doctype html> <html lang="en"> <head> <meta charset ...

便利贴--17{移动端滑动模块}

便利贴--17{移动端滑动模块}

id

便利贴--17{移动端滑动模块}相关推荐

最新文章

热门文章