便利贴--25{uniapp移动端滑动模块-因为uniapp打包后没有window，所以要另外去做监听和触控事件的传递}

效果

因为下拉时候如果实时去改变地图高度，map加载会有黑色闪烁，所以改成使用指示器，而map模块是最高级层，所以在map加了30高时候 直接隐藏掉了指示器，所以不需要考虑是否要隐藏指示器或者用绝对定位

vue

<template>
	<view class="maps">
		<map class="my-map" id="my-map" :style="{ height: mapHeight + 'px',width:'100%' }" :latitude="latitude"
			:longitude="longitude" :markers="markers" :controls="controlBtns" :polyline="polyline" :show-location="true"
			@controltap="controlClick"></map>
		<view class="Umain " ref="Umain" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove"
			:style="{ height: activeHeight}">
			<view :class="['activeTip',activeTip?'isOpens':'notOpens'] " :style="{height:'30px'}">
			</view>
			<view class="once" v-for="item in 10" :key="item">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	import $moveUniAppMap from "./moveUniAppMap.js"
	export default {
		data() {
			return {
				title: 'Hello',
				doms: null,
				types: null,
				mapHeight: '',
				latitude: 40.013305, //纬度
				longitude: 118.685713, //经度
				markers: [],
				controlBtns: [],
				polyline: [],
				moveDom: null, //移动实体类
				activeHeight: "auto ", //活动高度  默认自动
				activeTip: false, //是否展开
			}
		},
		beforeCreate() { //不可获取尺寸 uni.getSystemInfo
			console.log("beforeCreate 1");
			let that = this;
		},
		onLoad() { //可获取尺寸 及以下 uni.getSystemInfo
			console.log("onLoad 2");
			// this.types = uni.getSystemInfoSync().platform; //获取设备
			this.types = uni.getSystemInfoSync(); //获取设备
			console.log(this.types) //也可获取尺寸
			this.doms = uni.createSelectorQuery(); //获取取dom的uni工具
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.mapHeight = res.windowHeight;
				}
			});

		},
		onShow() {
			console.log("onShow 3");
		},
		created() { //不可操作dom 及以上
			console.log("created 4");

		},
		onReady() { //可以操作dom 及以下
			console.log("onReady 5");
			let that = this;
			let activeHeight = 0;
			this.getDom(".Umain", (res) => {
				// console.log(res)
				that.mapHeight = that.types.windowHeight - res.height + 30;
				activeHeight = res.height;
				let d = {
					activeDom: ".Umain",
					adaptDom: ".my-map",
					uni: uni,
					maxHeight: activeHeight, //在外面获取活动区域的高度，
					//在构造中动态获取会实时改变这个值
					//导致改变固定的最高高度
					useHeight: 3 * 40, //缩小后的高度、、可设置成保留高度
					critical: (activeHeight - 3 * 40) / 2, //收缩程度，，可设置成总滑动距离的1/2 (maxHeight - useHeight) / 2
					fn: (res) => {
						console.log(res)
						if (res.state != 'on') {
							that.mapHeight = that.types.windowHeight - res.height + 30;
						} else {
							if (res.translate) {
								that.activeTip = true;
							}
							if (res.translate) {
								that.activeTip = false;
							}
						}

						if (res.translate === true) {
							that.activeTip = true;
						} else if (res.translate === false) {
							that.activeTip = false;
						}
						that.activeHeight = res.height + 'px';
					}
				}
				this.moveDom = new $moveUniAppMap(d);
			})
		},
		mounted() {
			console.log("mounted 6");
		},
		onHide() {
			console.log("onHide 7");
		},
		onBackPress(val) {
			console.log(val, "onBackPress 8");
		},
		methods: {
			touchstart(e) {
				// console.log(e.changedTouches[0].clientY)
				if (this.moveDom) {
					this.moveDom.ListenerTouchstart(e)
				}
			},
			touchmove(e) {
				// console.log(e.changedTouches[0].clientY)
				if (this.moveDom) {
					this.moveDom.ListenerTouchmove(e)
				}
			},
			touchend(e) {
				// console.log(e.changedTouches[0].clientY)
				if (this.moveDom) {
					this.moveDom.ListenerTouchend(e)
				}
			},
			controlClick() {

			},
			getDom(name, fn) {
				this.doms.select(name).boundingClientRect((data) => {
					if (fn) {
						fn(data)
					}
				}).exec()
			}
		}
	}
</script>

<style lang="scss">
	page {
		/* 设置的是 标签uni-page-body calss: body.pages-index-index uni-page-body */
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		/* border: 1px solid green; */
	}



	.Umain {
		background-color: red;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
	}

	.once {
		height: 40px;
	}

	.notOpens {
		&::after {
			content: "";
			display: block;
			width: 20px;
			height: 4px;
			background-color: rgba(202, 202, 202, 1);
			position: absolute;
			top: 10px;
			left: calc(50% - 10px);
			border-radius: 5px;
			transition: all 0.1s;
		}
	}

	.activeTip {
		background-color: #fff;
	}

	.isOpens {
		&::after {
			content: "";
			display: block;
			width: 13px;
			height: 4px;
			background-color: rgba(202, 202, 202, 1);
			position: absolute;
			top: 10px;
			left: calc(50% - 12px);
			border-radius: 5px;
			transform: rotate(30deg);
			transition: all 0.1s;
		}

		&::before {
			content: "";
			display: block;
			width: 13px;
			height: 4px;
			background-color: rgba(202, 202, 202, 1);
			position: absolute;
			top: 10px;
			left: calc(50% - 4px);
			border-radius: 5px;
			transform: rotate(-30deg);
			transition: all 0.1s;
		}
	}
</style>

class $moveUniAppMap {

class $moveUniAppMap {
	constructor(arg) {
		this.activeDom = arg.activeDom; //活动dom
		this.adaptDom = arg.adaptDom; //适应dom
		this.windowSize = arg.uni.getSystemInfoSync(); // 设备参数含屏幕尺寸
		let doms = arg.uni.createSelectorQuery(); //获取dom参数uni工具
		this.getDoms = (name, fn) => { //fn是会回调函数，不用promis
			doms.select(name).boundingClientRect((data) => {
				if (fn) {
					fn(data)
				}
			}).exec()
		}
		console.log(this.windowSize)

		this.start = 0;
		this.end = 0;
		this.domHeight = 0;
		this.openValue = false; //方向
		this.useHeight = arg.useHeight; //使用的低高度
		this.critical = arg.critical; //收缩展开的程度
		// this.getDoms(this.activeDom, (res) => { //获取dom最大高度
		this.maxHeight = arg.maxHeight;
		// })
		this.fn = (res) => {
			if (arg.fn) {
				arg.fn(res)
			} else {
				console.log(res, "未设置输出函数")
			}
		}

		return this;
	}
	ListenerTouchstart(dom) { //开始移动，记录开始点和活动dom高度
		this.start = dom.changedTouches[0].clientY;
		this.getDoms(this.activeDom, (res) => { //动态获取当前活动dom高度
			this.domHeight = res.height;
		})
		// console.log(this.start, "this.start")
	}
	ListenerTouchmove(dom) {
		let endOn = dom.changedTouches[0].clientY;
		// console.log(that.domHeight, that.start, endOn)
		let usecha = +this.start - +endOn;
		let cha = this.domHeight + usecha;
		if (cha >= this.maxHeight) {
			cha = this.maxHeight;
		} else if (cha <= this.useHeight) {
			cha = this.useHeight;
		}
		let translate = false;
		if (usecha >= this.critical) {
			translate = true;
		}
		if (usecha <= -this.critical) {
			translate = true;
		}
		let d = {
			state: "on",
			height: cha,
			translate: translate
		};
		if (usecha >= 0) {
			d.state = "up";
		}
		// console.log(cha, "cha")
		// console.log(usecha, "cha")
		this.fn(d);
	}
	ListenerTouchend(dom) {
		this.end = dom.changedTouches[0].clientY;
		let cha, states;
		if (this.end >= this.start) {
			states = false; //方向向下收缩
			cha = this.end - this.start;
		} else {
			states = true; //方向向上抬起
			cha = this.start - this.end;
		}
		if (cha >= this.critical) {
			//高
			this.judge(states, true); //程度
		} else if (cha < this.critical) {
			//低
			this.judge(states, false); //程度
		}
		// console.log(cha)
	}
	innit() {

	}
	//输出事件
	judge(val, chengdu) {
		let translate = '';
		if (chengdu) {
			this.openValue = val;
			if (val) {
				this.height = this.maxHeight; //给到向上的最高高度
			} else {
				this.height = this.useHeight; //给到向下的最低高度
			}
		} else {
			this.height = this.domHeight; //给到当前高度
		}
		if (this.height == this.maxHeight) {
			translate = false;
		} else {
			translate = true;
		}
		let d = {
			state: this.openValue,
			height: this.height,
			translate: translate
		};
		// console.log(d)
		this.fn(d);
	}
}

export default $moveUniAppMap;