行业新鲜事儿
小程序开发者为了实现更灵活的拖拽缩放方式、更友好的页面交互效果还有更快捷的加载页面表现更新了手势组件,现已经应用到多个交互场景,如跳转功能页面的半屏场景。
拖拽式交互
对比使用手势组件前后的操作,小程序半屏手势操作更加灵敏。用户仅需拖拽即可操作整个半屏页面,也能够与滚动组件无缝切换。

想要实现半屏页面的灵活操作,仅需新增调用 pan-gesture-handler (用于拖动触发)以及 vertical-drag-gesture-handler (用于纵向滑动触发)2个 手势组件 即可快速实现。编写 WXML 代码过程中,开发者主要使用 4 个核心属性,例如 on-gesture-event 等。编写 JS 代码过程中,开发者需要调用 worklet 函数,改变半屏的状态值,使得小程序实现类似原生动画的体验。
分段式交互
针对信息同时显示的需求,半屏页面是否有更好的交互?例如地图小程序开发者希望在展示多段导航信息的同时不影响用户查看当前定位。分段式交互能够满足上述多信息显示的需求。用户通过自由拖拽和位置停留,实现分段式半屏效果。

分段式半屏的开发也很方便,在拖拽式交互的基础上增加当前半屏位置判断以响应分段式半屏还是内容列表。
页面转场交互
针对更丰富的半屏内容,例如小程序助手需要展开多位成员的申请详情,转场半屏交互能够实现更顺滑的交互效果,给予用户更自然、友好的体验。
通过 自定义路由 与手势组件的结合,开发者不仅能够实现以上页面转场交互的效果,还能够实现更多类原生的页面切换效果。
END

