分段式交互

针对信息同时显示的需求，半屏页面是否有更好的交互？例如地图小程序开发者希望在展示多段导航信息的同时不影响用户查看当前定位。

分段式交互能够满足上述多信息显示的需求。用户通过自由拖拽和位置停留，实现分段式半屏效果。

分段式半屏的开发也很方便，在拖拽式交互的基础上增加当前半屏位置判断以响应分段式半屏还是内容列表。

既然分段式半屏如此方便，你可以通过下面方式快速应用：

通过微信开发者工具导入 （注意：使用 PC 端浏览器打开链接）

点击 查看完整代码

// page.js// 设置 map scale// 运行在 JS 线程setMapScale(scale) {this.setData({ scale })},// worklet 函数，运行在 UI 线程scrollTo(toValue) {"worklet"let scale = 18if (toValue > screenHeight / 2) {scale = 16}// 从 UI 线程调回 JS 线程wx.worklet.runOnJS(this.setMapScale.bind(this))(scale)this.transY.value = timing(toValue, { duration: 200 })},// 处理拖动半屏的手势handlePan(gestureEvent) {"worklet"// 滚动半屏的位置if (gestureEvent.state === GestureState.ACTIVE) {// deltaY < 0，往上滑动this.upward.value = gestureEvent.deltaY < 0// 当前半屏位置const curPosition = this.transY.value// 只能在 [statusBarHeight, screenHeight] 之间移动const destination = clamp(curPosition + gestureEvent.deltaY, statusBarHeight, screenHeight)if (curPosition === destination) return// 改变 transY，来改变半屏的位置this.transY.value = destination}if (gestureEvent.state === GestureState.END || gestureEvent.state === GestureState.CANCELLED) {if (this.transY.value <= screenHeight / 2) {// 在上面的位置if (this.upward.value) {this.scrollTo(statusBarHeight)} else {this.scrollTo(screenHeight / 2)}} else if (this.transY.value > screenHeight / 2 && this.transY.value <= this.initTransY.value) {// 在中间位置的时候if (this.upward.value) {this.scrollTo(screenHeight / 2)} else {this.scrollTo(this.initTransY.value)}} else {// 在最下面的位置this.scrollTo(this.initTransY.value)}}},

页面转场交互

针对更丰富的半屏内容，例如小程序助手需要展开多位成员的申请详情，转场半屏交互能够实现更顺滑的交互效果，给予用户更自然、友好的体验。

通过 与手势组件的结合，开发者不仅能够实现以上页面转场交互的效果，还能够实现更多类原生的页面切换效果。后续的文章将会详细分享自定义路由的最佳实践，敬请关注！

小程序手势组件助力开发者更高效地实现类原生交互的体验，对用户操作更友好。以半屏页面为例的场景通过手势操作实现丝滑、灵敏的效果，实现更丰富的应用。

未来小程序团队还会分享更多手势操作的实用案例，欢迎关注 ，发现更多小程序好用功能！

如有更多接口相关问题，可点击 发帖反馈，技术专员将为大家解答及进行深度交流。

推荐阅读

标签：