页面返回手势

页面返回手势

默认情况下，小程序页面都是右滑返回。但在使用自定义路由和预设路由时，我们常常需要不同的手势返回效果。

例如使用 wx://cupertino-modal 路由效果时，下个页面自底向上出现，右滑返回并不符合视觉一致性。采用纵向的滑动返回（原路返回）会更合适一些。

使用方法

开发者工具需升级到 Nightly 1.06.2403222，基础库选择 3.4.0。

一行代码配置

在自定义路由配置中，开发者可通过 fullscreenDrag 和 popGestureDirection 来定义手势返回效果。

属性	类型	默认值	说明
popGestureDirection	string	horizontal	返回手势方向
fullscreenDrag	boolean	false	右滑返回手势区域拓展到全屏范围

popGestureDirection 支持的枚举值如下

• horizontal：仅能横向拖动返回，fullscreenDrag 仅对横向拖动有效
• vertical: 仅能纵向拖动返回
• multi: 可以横向或纵向拖动返回

结合纵向滚动容器

当纵向拖动返回时，若页面内有纵向滚动的 <scroll-view>，默认在 scroll-view 上滑动无法触发页面返回。

此时可声明关联容器为 pop-gesture，此时滑动 scroll-view 至顶端后可继续触发页面返回。

<scroll-view 
  type="custom"
  associative-container="pop-gesture"
>
  <!-- 页面内容 -->
</scroll-view>

结合预设路由

为增加路由配置的灵活性，3.4.0 版本起 wx.navigateTo 增加 routeConfig 和 routeOptions 两个属性。

routeConfig

routeConfig 可配字段。navigateTo 传入的 routeConfig 将会覆盖 routeBuilder 返回的配置项，开发者可借此更改 预设路由 返回手势类型。

routeOptions

routeBuilder 接口定义。routeOptions 将作为 routeBuilder 的第二个参数传入，开发者可根据当前页面动态改变路由动画的内容。比如对 BottomSheet 更改高度、圆角等，以适应不同场景。

interface INavigateToArg {
  url: string,
  routeType: string,
  routeConfig: CustomRouteConfig,
  routeOptions: Record<string, any>
}

wx.navigateTo({
  routeType: 'wx://bottom-sheet',
  routeConfig: {
    fullscreenDrag: true,
    popGestureDirection: 'multi'
  },
  routeOptions: {
    round: false,
  },
})

常用的 wx://bottom-sheet 预设路由 routeOptions 增加如下属性

属性	类型	默认值	说明
round	boolean	true	是否使用圆角
height	number	60	弹窗页面高度，单位 vh

示例代码片段

在开发者工具中预览效果