效果

因为下拉时候如果实时去改变地图高度，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.getSystemInfoconsole.log("beforeCreate 1");let that = this;},onLoad() { //可获取尺寸 及以下 uni.getSystemInfoconsole.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) / 2fn: (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; //活动domthis.adaptDom = arg.adaptDom; //适应domthis.windowSize = arg.uni.getSystemInfoSync(); // 设备参数含屏幕尺寸let doms = arg.uni.createSelectorQuery(); //获取dom参数uni工具this.getDoms = (name, fn) => { //fn是会回调函数，不用promisdoms.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;

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

便利贴--17{移动端滑动模块}
便利贴--17{移动端滑动模块} id id 动态绑定高度 <div id="mobileActivity" :style="{ height: height + ...
便利贴--23{移动端滑动模块-改良}
便利贴--23{移动端滑动模块-改良} 效果之前那个只适用于之前的项目,这个可以自定义项目使用效果之前那个只适用于之前的项目,这个可以自定义项目在这里可以编写切面函数,直接区分内部事务和外部 ...
微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页
PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页最近学习移动端网页开发的时候,遇到了一个问题,如何在真机上看到控制台输出的内容. 虽然现在的桌面浏览器提供了模拟手 ...
python的pynput模块控制鼠标、键盘和监听鼠标、键盘事件
前言本来在做图形界面时想用监听键盘的方式来实现,快捷键功能的.运用多线程一个线程是运行图形界面,另一个线程监听键盘的动作.可使用的时候发现不太协调,两个进程虽然都能运行但是图形界面会有时卡住,看了文 ...
【解决】uniapp，无法在onLoad及onUnload生命周期内触发激光扫码的监听事件，可在created及beforeDestroy生命周期内触发
[问题] uniapp开发App,发现无法在onLoad及onUnload生命周期内触发及销毁子组件内的激光扫码的监听事件. 子组件内示例代码如下: <script> export def ...
移动端（iphone）上使用canvas绘图，为canvas添加了监听点击事件，结果在iphone上点击会出现闪屏
为html,body添加css样式即可解决 html,body{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
uniapp的video监听不到@ended事件
loop值设置为false
记录uni-app网络请求跨域、安卓打包后网络请求报错
跨域测试方法如下:网络请求接口地址玩安卓的开放API:https://wanandroid.com/article/listproject/0/json 注意url是完整地址,并且manifest. ...

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

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

效果

vue

class $moveUniAppMap {

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

最新文章

热门文章