uniapp半屏拖拽

实现半屏拖拽的基本思路

在UniApp中实现半屏拖拽效果，通常结合<movable-area>和<movable-view>组件完成。通过动态调整<movable-view>的位置和高度，结合触摸事件监听，实现拖拽交互。

核心代码示例

以下是一个基础的半屏拖拽实现代码：

<template>
  <view>
    <!-- 拖拽区域容器 -->
    <movable-area class="drag-area">
      <!-- 可拖拽视图，设置y轴方向拖拽 -->
      <movable-view 
        class="drag-view" 
        direction="vertical" 
        :y="yPosition" 
        @change="onDragChange"
        @touchend="onDragEnd"
      >
        <!-- 拖拽手柄（可选） -->
        <view class="drag-handle"></view>
        <!-- 内容区域 -->
        <view class="content">
          <!-- 页面内容 -->
        </view>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
export default {
  data() {
    return {
      yPosition: 0,  // 初始位置
      screenHeight: 0,
      minY: 0,       // 最小拖拽位置
      maxY: 0        // 最大拖拽位置
    };
  },
  mounted() {
    // 获取屏幕高度并计算拖拽范围
    uni.getSystemInfo({
      success: (res) => {
        this.screenHeight = res.windowHeight;
        this.maxY = res.windowHeight * 0.6; // 最大拖到60%高度
      }
    });
  },
  methods: {
    onDragChange(e) {
      this.yPosition = e.detail.y;
    },
    onDragEnd() {
      // 拖拽结束后判断位置，自动吸附到顶部或底部
      if (this.yPosition > this.screenHeight * 0.3) {
        this.yPosition = this.maxY; // 吸附到底部
      } else {
        this.yPosition = this.minY; // 吸附到顶部
      }
    }
  }
};
</script>

<style>
.drag-area {
  width: 100%;
  height: 100vh;
  position: fixed;
  bottom: 0;
}
.drag-view {
  width: 100%;
  height: 70vh; /* 初始高度 */
  background-color: #fff;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
}
.drag-handle {
  width: 80rpx;
  height: 8rpx;
  background-color: #ddd;
  margin: 20rpx auto;
  border-radius: 4rpx;
}
</style>

关键点说明

1. movable-area与movable-view

   • movable-area为拖拽容器，需设置固定宽高（如100vh）。
   • movable-view设置direction="vertical"限制垂直拖拽，通过y属性动态控制位置。

2. 拖拽范围计算

   

   • 通过uni.getSystemInfo获取屏幕高度，动态计算maxY（如屏幕高度的60%）。

3. 吸附效果

   • 在@touchend事件中判断当前拖拽位置，若超过阈值则自动吸附到预设位置（如顶部或底部）。

4. 样式优化

   • 拖拽手柄（.drag-handle）增强交互提示，圆角和背景色提升视觉体验。

进阶优化

• 动画过渡：通过CSS的transition属性或UniApp的animationAPI实现平滑吸附动画。
• 动态内容高度：根据拖拽位置动态调整内容区域高度，如使用calc(100vh - ${yPosition}px)。
• 手势限制：通过@touchmove事件拦截水平滑动，避免与页面滚动冲突。

通过上述方法，可快速实现类似微信小程序半屏弹窗的拖拽效果。