# draggable-sheet
基礎庫 3.2.0 開始支持，低版本需做兼容處理。
相關文檔: Skyline 渲染引擎、Skyline 遷移起步
渲染框架支持情況：Skyline （使用最新 Nightly 工具調試）
# 功能描述
半屏可拖拽組件。該組件需配合 DraggableSheetContext 接口使用。 目前僅在 Skyline 渲染引擎下支持。
# 屬性說明
| 屬性 | 類型 | 默認值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
| 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 | 否 | 尺寸發(fā)生變化時觸發(fā)，僅支持 worklet 作為回調。event = {pixels, size} | 3.2.0 |
# 示例代碼
<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}`)
}
})