ReaderMX.
微信开发者

半屏拖拽，实现超快！

微微信团队约 3 分钟

现在不少小程序在点餐、购物、支付等环节应用半屏页面，替代原有的左右切换交互。这种方式不仅减弱页面切换带来的流程割裂感，而且减弱页面加载造成用户等待时间长的体验感。

然而通过点按操作来开关半屏，用户体验不够流畅，能否借助手势操作灵活控制半屏页面，甚至调整新页面的显示范围？

Image

Skyline 渲染引擎全新推出 draggable-sheet 组件，自带拖拽交互。无论是半屏一次拖拽，还是分段多次拖拽，开发者无需复杂代码，简单配置即可快速应用。一起来看看如何应用吧！

更简单的接入过程

不同于以往编写大量的手势协商代码，现在应用一个 draggable-sheet 组件快速实现半屏拖拽功能，代码量大大减少。

Image

在 wxml 页面中，开发者仅需配置组件即可应用。

  1. 引入 draggable-sheet 组件并配置容器大小等组件参数

  2. 在 draggable-sheet 组件内嵌套 scroll-view 组件，声明 associative-container="draggable-sheet"，将 2 个组件进行关联

👉 点击查看代码

<!-- 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>

在 js 页面中，开发者应用 DraggableSheetContext 接口，实现更丰富、更灵活的滚动控制效果。

  1. 使用 createSelectorQuery 方法获取 draggable-sheet 组件的节点

  2. 通过 node 方法获取 DraggableSheetContext 实例，调用 DraggableSheetContext.scrollTo 即可将 draggable-sheet 组件滚动到指定位置

👉 点击查看代码

// page.jsPage({  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 组件支持更多组件融合，实现更贴近原生、更丰富的交互效果。

例如开发者可以结合 draggable-sheet 组件与worklet 动画，实现手势拖动半屏至全屏，完美融合到顶部搜索框。整个交互仅需手势操作即可丝滑融合，体验更流畅，设计效果更美观。

Image

实现上述效果并不复杂，仅需 2 个步骤即可：

  1. 给 draggable-sheet 组件配置监听函数 worklet:onsizeupdate="onSizeUpdate"

  2. 在 onSizeUpdate 发生变化时，通过 worklet 函数改变共享变量值

👉 点击查看代码

<!-- page.wxml -->
<view class="search-wrp">  ...</view>
<draggable-sheet class="sheet" ... worklet:onsizeupdate="onSizeUpdate">
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    },})

相比点按操作，拖拉拽的手势操作更符合使用习惯。应用在半屏 / 分段式的页面设计让用户体验更丝滑，对业务流程更有帮助。现在直接使用 draggable-sheet 组件 实现开箱即用，页面拖拽更好用。

现在点击 代码片段 （请使用 PC 端浏览器打开），快速应用到你的小程序项目吧！如果你还想实现更多手势交互，欢迎在下方评论区分享。官方团队将优先上线或分享能力的最佳实践，更好地满足你的开发需求。

同时 Donut 多端框架 也支持接入 Skyline 渲染引擎，多端应用同步实现更流畅的交互效果，欢迎各位开发者接入！

Image

KEEP THE THREAD GOING

更多来源文章