小程序手势 打开半屏新姿势-杭州网站建设为你呈现

<pan-gesture-handler id="pan"  should-response-on-move="shouldPanResponse"   simultaneous-handlers="{{['scroll']}}"  on-gesture-event="handlePan">
    <vertical-drag-gesture-handler id="scroll"   native-view="scroll-view"   should-response-on-move="shouldScrollViewResponse"   simultaneous-handlers="{{['pan']}}">    <scroll-view type="list" scroll-y> ... scroll-view>  vertical-drag-gesture-handler>
pan-gesture-handler>

// page.js// shared 创建的变量为共享变量，可在 UI 线程和 JS 线程间同步this.transY = wx.worklet.shared(1000)this.scrollTop = wx.worklet.shared(0)this.startPan = wx.worklet.shared(true)
// shouldPanResponse 和 shouldScrollViewResponse 用于 pan 手势和 scroll-view 滚动手势的协商shouldPanResponse() {  'worklet'  return this.startPan.value},shouldScrollViewResponse(pointerEvent) {  'worklet'  // transY > 0 说明 pan 手势在移动半屏，此时 scroll-view 滚动不应生效  if (this.transY.value > 0) return false  const scrollTop = this.scrollTop.value  const { deltaY } = pointerEvent  // deltaY > 0 是往上滚动，scrollTop <= 0 是滚动到顶部边界，此时 pan 开始生效，scroll-view 滚动不生效  const result = scrollTop <= 0 && deltaY > 0  this.startPan.value = result  return !result},
// pan 手势处理handlePan(gestureEvent) {  'worklet'  if (gestureEvent.state === GestureState.ACTIVE) {    const curPosition = this.transY.value    const destination = Math.max(0, curPosition + gestureEvent.deltaY)  // 改变半屏的位置    this.transY.value = destination  }
  // 其他手势状态的处理，如滚动结束时计算半屏处于打开还是关闭的状态}