更新记录

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

flx：滚动速度

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

初始化上传

平台兼容性

uni-app(4.87)

cl-draggableSheet 拖拽底部面板组件

支持拖拽、吸附点、受控高度、插槽自定义、事件通知与滚动锁定。

注意事项

1. disablePageScroll 仅在 H5 生效，默认锁定 .navigate-page 容器。
2. 使用吸附点时会自动补齐 minHeight 与 maxHeight。
3. v-model:height 为受控模式，外部更新会覆盖内部高度。

基础使用

<cl-draggableSheet
    :minHeight="220"
    :maxHeight="700"
    :initialHeight="320"
    @stateChange="onStateChange"
    @heightChange="onHeightChange"
>
    <view>内容区域</view>
</cl-draggableSheet>

吸附点

<cl-draggableSheet
    :minHeight="220"
    :maxHeight="700"
    :snapPoints="[220, 420, 700]"
    :initialIndex="1"
></cl-draggableSheet>

受控高度（v-model）

<cl-draggableSheet
    v-model:height="sheetHeight"
    :minHeight="220"
    :maxHeight="700"
></cl-draggableSheet>

自定义把手与标题区

<cl-draggableSheet :minHeight="220" :maxHeight="700">
    <template #handle>
        <view class="my-handle">可拖动</view>
    </template>
    <template #header>
        <view class="my-header">服务信息</view>
    </template>
    <view>内容区域</view>
</cl-draggableSheet>

禁用拖拽

<cl-draggableSheet :disabled="true"></cl-draggableSheet>

方法调用

<cl-draggableSheet ref="sheet"></cl-draggableSheet>

methods: {
    toMin() {
        this.$refs.sheet.toMin()
    },
    toMax() {
        this.$refs.sheet.toMax()
    },
    setHeight() {
        this.$refs.sheet.setHeight(420)
    }
}

API

Events

Slots