更新记录

1.1.0（2026-04-12） 下载此版本

feat：增强使用体验

1.0.1（2026-01-30） 下载此版本

flx：滚动速度

1.0.0（2026-01-30） 下载此版本

初始化上传

平台兼容性

uni-app(4.87)

cl-draggableSheet 拖拽底部面板组件

支持拖拽调整高度、锚点吸附、受控高度、头部插槽、自定义样式和底部安全区适配。

组件特点

1. 拖拽面板时会根据速度自动吸附到最近或下一档锚点。
2. 支持通过 v-model:height 在外部受控管理面板高度。
3. 内容区默认允许联动拖拽，也可以通过 contentDraggable 关闭。
4. 头部内置拖拽条，同时支持 header 插槽扩展标题或操作区。
5. 可选开启底部安全区和滚动条显示。

基础使用

<template>
  <cl-draggableSheet
    v-model:height="sheetHeight"
    :anchors="[160, 360, 640]"
    :velocityThreshold="0.2"
    safeAreaInsetBottom
    @height-change="handleHeightChange"
  >
    <template #header>
      <view class="sheet-header">
        <text class="sheet-title">服务信息</text>
        <text class="sheet-desc">向上拖动查看更多内容</text>
      </view>
    </template>

    <view class="sheet-body">
      <view v-for="item in 8" :key="item" class="sheet-item">
        列表项 {{ item }}
      </view>
    </view>
  </cl-draggableSheet>
</template>

<script setup>
import { ref } from 'vue'

const sheetHeight = ref(360)

function handleHeightChange({ height }) {
  console.log('当前吸附高度：', height)
}
</script>

仅使用默认锚点

当 anchors 少于 2 项时，组件会自动使用默认锚点：[100, windowHeight * 0.6]。

<cl-draggableSheet :height="260">
  <view>默认会在 100px 和窗口高度 60% 之间吸附</view>
</cl-draggableSheet>

禁止内容区联动拖拽

<cl-draggableSheet
  v-model:height="sheetHeight"
  :anchors="[180, 520]"
  :contentDraggable="false"
>
  <view>此时只能通过头部区域拖动面板</view>
</cl-draggableSheet>

自定义样式

<cl-draggableSheet
  :anchors="[180, 400, 680]"
  customClass="custom-sheet"
  customStyle="box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.16);"
>
  <view>支持扩展类名和内联样式</view>
</cl-draggableSheet>

API

Props

Events

Slots

使用建议

1. anchors 建议按从小到大传入，避免吸附结果不符合预期。
2. 受控模式下请直接修改绑定的 height，不要依赖组件实例方法。
3. 如果内容区本身需要纵向滚动优先级更高，可以关闭 contentDraggable。
4. customStyle 会直接拼接到根节点样式字符串中，建议传合法 CSS 片段。