便利贴--23{移动端滑动模块-改良}

效果

之前那个只适用于之前的项目，这个可以自定义项目

在这里可以编写切面函数，直接区分内部事务和外部输出，计算整体dom高度也有改变

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.maxHeight = data.maxHeight;
		this.height = data.minHeight;
		this.critical = data.critical;

		let that = this;
		this.fn =
			data.fn ? (function(res) {
				// console.log("回调函数");
				data.fn(res);
				that.changeHeight(res);
				// if (res.state === true) {
				// 	console.log(that.openValue, res.state)
				// } else if (res.state === false) {
				// 	console.log(that.openValue, res.state)
				// }
			}) :
			(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;
			// console.log(that.domHeight, that.start, endOn)
			let cha = that.domHeight + (+that.start - +endOn);
			if (cha >= that.maxHeight) {
				cha = that.maxHeight;
			} else if (cha <= that.useHeight) {
				cha = that.useHeight;
			}
			let d = {
				state: "on",
				height: 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];
			that.domHeight = document
				.getElementById(that.id)
				.clientHeight;
		};
		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;
			}
			if (cha >= that.critical) {
				//高
				that.opens(states, true); //程度
			} else if (cha < that.critical) {
				//低
				that.opens(states, false); //程度
			}
		};
		return this;
	}
	//启动监听事件
	init() {
		// this.domMove = document.getElementById(this.id);
		let that = this;
		this.checkDom(that.id, (dom) => {
			//检测是否有dom
			that.domMove = dom;
			that.domMove.addEventListener("touchmove", that.ListenerTouchmove);
			// 结束位置靠滑动距离判断
			that.domMove.addEventListener("touchstart", that.ListenerTouchstart);
			that.domMove.addEventListener("touchend", that.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, chengdu) {
		if (chengdu) {
			this.openValue = val;
			if (val) {
				this.height = this.maxHeight;
			} else {
				this.height = this.useHeight;
			}
		} else {
			this.height = this.domHeight;
		}
		let d = {
			state: this.openValue,
			height: this.height,
		};
		this.fn(d);
	}
	changeHeight(data) {
		document
			.getElementById(this.id).style.height = data.height + "px";
	}
	checkDom(name, fn) {
		//  声明定时器
		var timer = null;
		//  检查dom是否执行完成
		function checkDom() {
			// let dom = that.$refs[name];
			let dom = document.getElementById(name);
			if (dom) {
				//  执行dom加载完成后的操作
				//  清除定时器
				if (!timer) {
					clearTimeout(timer);
				}
				if (fn) {
					//回调函数
					fn(dom);
					return;
				} else {
					return dom;
				}
			} else {
				//  自我调用
				timer = setTimeout(checkDom, 100);
			}
		}
		//  首次执行
		checkDom();
	}
	// 结束位置是一半判断
	//  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;

// console.log(moveWindow)

使用

let rows = document.getElementsByClassName("once"),
			rowsHeight = 0;
		for (let ri = 0; ri < 4; ri++) {
			rowsHeight += rows[ri].clientHeight;
		}
		this.domMove = new $moveWindow({
			id: "Umain",
			minHeight: rowsHeight,
			maxHeight: UmainHeight,
			critical: (UmainHeight - rowsHeight) / 4,
			fn: function(res) {
				document.getElementById("map").style.height = h - res.height + "px";
				if (res.state === true || res.state === false) {
					that.map.invalidateSize(true);
				}
				document.getElementsByClassName("dingwei")[0].style.bottom = res.height + 10 + "px";
			},
		});
		this.domMove.init();

这个判断可以不写，就是实时改变上部分地图的高度，否则是应用最后一次高度