# Page back gestures

By default, Weixin Mini Program pages are all right-swiped back.However, when using to customize the routing and to pre-configure the routing , we often need different gestures to return effects.

For example, when using thewx: / / cupertino-modalrouting effect, the next page appears bottom-up and swiping right back is not visually consistent.A longitudinal sliding return (original route return) would be more appropriate.

# How to use it

Developer tools need to be upgraded toNightly``1.06.2403222, base library selection3.4.0。

# One line of code configuration

In the custom routing configuration , developers can define gesture returns byfullscreenDrag]]and`popGestureDirection]].

The enumeration values supported by popGestureDirectionare as follows

• Horizontal: Drag returns only horizontally, fullscreenDrag only works for horizontal drag
• Vertical: Can drag back only vertically
• Multi: You can drag back horizontally or vertically

# Combine vertically rolling containers

When the vertical drag returns, if the page has a vertical scroll ', the default slide on thescroll-view' does not trigger the page return.

At this point, the associated container can be declared aspop-gesture, and slide scroll-view Go to the top to continue triggering the page return.

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

# Combine preset routing

To increase the flexibility of routing configuration,3.4.0From version 1, [wx.navigateTo]]](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html) adds two properties:routeConfig]]androuteOptions]].

# routeConfig

RouteConfig configurable field .navigateToincomingrouteConfigwill cover the configuration item returned byrouteBuilder, allowing developers to change the default routing return gesture types.

# routeOptions

RouteBuilder interface definition .routeOptionsare introduced as a second parameter forrouteBuilder, allowing the developer to dynamically change the content of the route animation based on the current page.For example, change the height and rounded corners ofBottomSheetto fit different scenes.

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,
  },
})

Commonwx: / / bottom-sheetDefault routingrouteOptionsAdd the following properties

# Sample code snippet

Preview with Developer Tool