uniapp 小程序 仿高德可上下滑动搜索半屏地图组件 movable-area movable-view

image.png

image.png

<!-- 我的抽屉 -->
<template>
  <view>
    <movable-area class="move-content" @touchmove.stop>
      <movable-view
        class="move-incontent"
        :style="'height:' + movableHeight + 'rpx'"
        :y="initY"
        inertia
        :damping="20"
        :friction="1"
        direction="vertical"
        :animation="true"
        @change="movableChange"
        @touchend="touchEnd"
      >
        <slot></slot>  
      </movable-view>
    </movable-area>
  </view>
</template>

<script setup>
onBeforeMount(() => {});
const movableHeight = ref(1280); //滚动块高度
const windowHeight = ref(0); //窗口高度
const initY = ref(0); //定义y轴方向的偏移
const dragY = ref(0); //储存滑动距离

onMounted(() => {
  windowHeight.value = uni.getSystemInfoSync().windowHeight;
  movableHeight.value = (windowHeight.value - 172) * 2;
});
// S 移动拖拽
const movableChange = e => {
  let y = e.detail.y;
  dragY.value = y;
};
//触摸结束
const touchEnd = e => {
  initY.value = dragY.value; //这行必写 不然无法自动滑动到顶部或者底部
  setTimeout(() => {  
    if (dragY.value > -350) {  //结束时判断在一定高度内滑回去或者滑全屏
      initY.value = 0;
    } else {
      initY.value = -(windowHeight.value - 172);
    }
  });
};
</script>
<style lang='scss' scoped>
// S 滑动块
.move-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 172rpx; //盒子的大小限制会可移动范围

  .move-incontent {
    width: 100%;
    background-color: #fff;
  }
}
</style>