uniapp 内置地图map 上面弹窗拖动，地图会跟着一起走uniapp 模仿高德app首页用户可以拖拽地图之上的页面到

其实就是想模仿高德app首页用户可以拖拽地图之上的页面到任意位置的功能

思路：

创建.nvue 页面（这个很重要.vue各种问题，难搞）
在页面里建一个和标签同级的标签C，然后css给标签C进行absolute定位，拖动的时候可以去改变它的top值；
给同级标签C上面绑定touchStart和touchmove事件，在拖动的时候去给top赋值

遇到的问题：

标签C上绑定的touchStart事件，拖动的时候会有穿透事件，所以地图会跟着滚动，给事件上加上修饰符,这里搞了好久，安卓与ios的app和小程序，总是不能兼容

如果标签C里面子级没有事件直接绑定修饰符.stop就可以了
如果标签C里面子级绑定的有事件，子级绑定用@click.stop，标签C只需要给touchmove事件上绑定@touchmove.stop.prevent，否则ios的小程序会有问题

2.滚动的原因还可能是包着map和标签C的标签（也就是他们的父级E），没有设置overflow: hidden；此时ios的app端还是会滚动，因为苹果有刘海与底部安全高度，父级E需要通过方法获取可展示视图的高度，赋值给父级E。

<view class="map-page" :style="{height: saveHeight+'px'}">
    <map class="map" :style="{width:mapWidth + 'px',height: mapHeight+'px'}" :latitude="latitude"
                    :longitude="longitude" ></map>
    //这是我需要拖动的弹窗页面
    <view class="move-panel" :style="{top:moveTtop +'px'}" @touchstart="touchStart"
            @touchmove.stop.prevent="touchmove">
        <view class="list-panel" :style="{width: systemInfo.screenWidth +'px'}">
            <view class="panel-list">					
                <view class="panel" style="margin:0 1px;">					
                    <scroll-view class="hospitals flex-column-centerAll" scroll-y="true"
                            :style="{'height': '400px'}">
                        <view class="hospital-box"></view>
                    </scroll-view>
                </view>
             </view>
        </view>
    </view>

</view>

touchStart(e) {
    /* 1,记录手指的起始位置–坐标
    2.记录手指离开屏幕时的坐标值–记录手指在滑动过程中的坐标值
    3.计算两个记录的手指坐标的差异
    4.让dom元素也进行相应数值的偏移

    touches： 是指当前屏幕所有的手指对象
    targetTouches： 当前元素上的手指对象
    changedTouches: 当前屏幕上变换的手指对象–从无到有，从有到无			

    手指对象的坐标
    screenX/screenY:是手指的触摸点相对于屏幕左上角的坐标距离
    clientX/clientY:相对于当前视口–移动端屏幕
    pageX/pageY:相对于当前页面的内容–会有滚动条–包含滚动的
    */

    console.log('开始', e)
    this.lastY = e.touches[0].pageY; // 获取触摸时的x坐标
    // #ifdef APP-PLUS
    this.lastY = e.touches[0].screenY; //移动中纵向坐标 	
    // #endif				

},
touchmove(e) {
    // #ifdef APP-PLUS
    let currentY = e.changedTouches[0].screenY; //移动中纵向坐标 	
    // #endif
    // #ifdef MP-WEIXIN
    let currentY = e.touches[0].clientY; //移动中纵向坐标		
    // #endif
    let transformTop = Math.abs(currentY - this.lastY) // 移动坐标与开始位置坐标差值
    if (transformTop < 10) return
    if (currentY < this.maxMoveTop) {
            this.moveTtop = this.maxMoveTop // 上划不能高于导出订单距离
    } else if (currentY > this.systemInfo.screenHeight - this.minMoveTop) {
            this.moveTtop = this.systemInfo.screenHeight - this.minMoveTop // 下划不能低于 当前展示的站点位置
    } else {
            this.moveTtop = currentY
    }
    // console.log('移动中',transformTop, e)
},
```

发布于 2024-03-06 19:07・IP 属地陕西`