在日常应用中，半屏可拖拽交互已经成为了用户体验的重要组成部分。页面内的分段式拖拽、半屏拖拽放大等等，这些常见的场景使用半屏拖拽交互可以很好的提升用户的体验感。

目前，实现半屏拖拽交互可以使用手势协商系统来实现，不过需要理解手势协商系统并编写相关代码。

考虑到半屏拖拽交互比较常见，为了让小程序开发者更加轻松地实现半屏拖拽交互，小程序 Skyline 渲染引擎推出了 draggable-sheet 组件。这个组件自带半屏拖拽交互，可以帮助开发者省去手势协商相关的代码，只需要简单配置容器大小、吸附阈值等参数即可实现半屏拖拽交互。无论是半屏弹窗、分段式半屏还是其他场景，draggable-sheet 组件都能帮助你实现更加出色的用户体验。

快速接入

使用 draggable-sheet 组件的流程如下：

Step 1. 配置 draggable-sheet 组件

在页面中引入 draggable-sheet 组件，并且配置 draggable-sheet 组件的参数，包括容器大小、吸附阈值等。

在 draggable-sheet 组件内嵌套 scroll-view 组件，且声明 associative-container="draggable-sheet" 将 scroll-view 组件与 draggable-sheet 组件进行关联即可。

<!-- page.wxml -->
<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]}}"
>
  <scroll-view
    scroll-y="{{true}}"
    type="list"
    associative-container="draggable-sheet"
    bounces="{{true}}"
  >
  <!-- 这里放置半屏内容 -->
  </scroll-view>
</draggable-sheet>

Step 2. 使用 DraggableSheetContext 接口控制滚动

使用 createSelectorQuery 方法获取 draggable-sheet 组件的节点，然后通过 node 方法获取 DraggableSheetContext 实例。调用 DraggableSheetContext.scrollTo 即可将 draggable-sheet 组件 滚动到指定位置。

// page.js
Page({
  onReady() {
    this.createSelectorQuery().select('.sheet').node().exec(res => {
      // 使用 sheetContext 控制 draggable-sheet 组件的滚动
      const sheetContext = res[0].node
      sheetContext.scrollTo({
        size: 0.7,
        animated: true,
        duration: 300,
        easingFunction: 'ease'
      })
    });
  },
});

使用 draggable-sheet 组件，你可以轻松实现半屏拖拽交互，让用户体验更加自由。同时，使用 DraggableSheetContext 接口，你可以动态控制 draggable-sheet 组件的行为，实现更加灵活的交互效果。 

例如，我们这里演示了使用 draggable-sheet 实现的 分享弹窗效果 和 分段式拖拽查看旅游景点列表～

与其他组件联动 

除了简单的半屏弹窗之外，我们还可以通过 worklet:onsizeupdate 回调，在 draggable-sheet 组件尺寸发生变化时，将 draggable-sheet 组件与其他组件进行动画交互。

例如，我们这里在 draggable-sheet 接近搜索框时，与搜索框衔接为一体，隐藏后面的页面，以此实现更流畅的展示效果。

首先，给 draggable-sheet 配置监听函数 worklet:onsizeupdate="onSizeUpdate"

<!-- page.wxml -->
<view class="search-wrp">
	...
</view>

<draggable-sheet
 class="sheet"
 ...
 worklet:onsizeupdate="onSizeUpdate"
>

然后，我们在 onSizeUpdate 发生变化时，通过 worklet 函数改变共享变量的值即可

Page({
  // 监听 draggable-sheet 尺寸变化去改变 progress
  onSizeUpdate(e) {
    'worklet'
    const distance = sheetHeight - e.pixels
    this.progress.value = distance >= 20 ? 1 : distance / 20
  },
  onLoad(options) {
    const progress = wx.worklet.shared(1)
    // 绑定 worklet 动画，progress 变化时改变搜索的背景来显示/隐藏 map
    this.applyAnimatedStyle('.search-wrp', () => {
      'worklet'
      const t = progress.value
      return {
        backgroundColor: `rgb(245, 242, 241, ${1 - t})` 
      }
    })
      ...
      this.progress = progress
    },
})

如果想要快速了解和实践本文中的案例，可在 PC 端点击 代码片段 进行调试。

注意：draggable-sheet 组件支持页面内的拖拽放大功能，如果需要实现页面返回的功能，可以使用 预设路由 来实现。

总结

draggable-sheet 组件通过拖拽的方式来展开或关闭一个面板，提供更加直观、自然的用户交互体验。不仅能够节省屏幕空间，让用户更加高效地利用界面，适用于展示评论列表、商品列表、展开筛选条件、展示更多信息等场景。对于需要提供更加灵活、自由的用户交互体验的小程序来说，draggable-sheet 组件是一个非常有用的功能。

因此，我们邀请大家尝试将这个能力应用到自己的小程序上，通过这个组件来提升用户体验和交互效果。结合其他组件和功能，打造出更加丰富、多样的小程序～