# draggable-sheet

基础库 3.2.0 开始支持，低版本需做兼容处理。

相关文档: Skyline 渲染引擎、Skyline 迁移起步

渲染框架支持情况：Skyline （使用最新 Nighly 工具调试）

# 功能描述

半屏可拖拽组件。该组件需配合 DraggableSheetContext 接口使用。目前仅在 Skyline 渲染引擎下支持。

页面内拖拽是一种常见的交互效果，开发者可通过手势系统灵活实现。draggable-sheet 组件封装了常见的交互逻辑，实现起来更加简单。

该组件需结合 scroll-view 使用。scroll-view 组件声明 associative-container 属性后，可与 draggable-sheet 关联起来。

# 通用属性

属性类型默认值必填说明最低版本

initial-child-size number 0.5 否初始时占父容器的比例 3.2.0

min-child-size number 0.25 否最小时占父容器的比例 3.2.0

max-child-size number 1.0 否最大时占父容器的比例 3.2.0

snap boolean false 否拖拽后是否自动对齐关键点 3.2.0

snap-sizes Array.<number> [] 否拖拽后对齐的关键点，无需包含最小和最大值 3.2.0

worklet:onsizeupdate worklet 否尺寸发生变化时触发，仅支持 worklet 作为回调。event = {pixels, size} 3.2.0

合法值	说明
size	表示当前高度占 `draggable-sheet` 组件高度的比例
pixels	表示当前高度的绝对值，单位 `px`

# 示例代码

<draggable-sheet
  class="sheet"
  initial-child-size="0.5"
  min-child-size="0.2"
  max-child-size="0.8"
  snap="{{true}}"
  snap-sizes="{{[0.4, 0.6]}}"
  worklet:onsizeupdate="onSizeUpdate"
>
  <scroll-view
    scroll-y="{{true}}"
    type="list"
    associative-container="draggable-sheet"
    bounces="{{true}}"
  />
</draggable-sheet>

Page({
  onReady() {
    this.createSelectorQuery()
      .select(".sheet")
      .node()
      .exec(res => {
        const sheetContext = res[0].node
        sheetContext.scrollTo({
          size: 0.7,
          animated: true,
          duration: 300,
          easingFunction: 'ease'
        })
  },

  onSizeUpdate(e) {
    'worklet'
    console.info(`sizeUpdate pixels: ${e.pixels} size: ${e.size}`)
  }
})

# 效果演示

# 示例代码片段

在开发者工具中预览效果