# Page Return Gesture

By default, Mini Program pages are swiped right back. But in the use ofCustom RoutingandPreset routeWe often need different gestures to return effects.

For example, use wx://cupertino-modal When routing effects, the next page appears bottom-up and right-swipes back are not visually consistent. It is more appropriate to use the longitudinal sliding return (the original road return).

# Methods of Use

Developer tools need to be upgraded to Nightly 1.06.2403222, Base Library Selection 3.4.0。

# One line of code configuration

inCustom Route ConfigurationThe developer can use Fullscreen Drag and popGestureDirection To define the gesture return effect.

popGestureDirection The supported enumeration values are as follows

• Horizontal: Drag back only horizontally, fullscreenDrag Valid only for horizontal drag
• vertical: Can only be dragged vertically to return
• Multi: Can be dragged horizontally or vertically to return the

# Combined with longitudinal rolling container

When the vertical drag returns, if the page has a vertical scroll <scroll-view>, default in the scroll-view Swiping up cannot trigger a page return.

The associated container can then be declared pop-gesture, Sliding At This Time scroll-view To the top to continue to trigger page returns.

<scroll-view 
  type="custom"
  associative-container="pop-gesture"
>
  <!-- Page Content -->
</scroll-view>

# Combined with preset route

For added flexibility in routing configuration,3.4.0 From version [wx.navigateTo ](https://developers.weixin.qq.com/miniprogram/dev/api/Route/wx.navigateTo .html) increase routeConfig and routeOptions Two properties.

# routeConfig

routeConfig Matching field。navigateTo Incoming routeConfig Will cover routeBuilder The returned configuration item that allows the developer to change the Preset route Returns the gesture type.

# routeOptions

routeBuilder Interface definition。routeOptions Will serve as the routeBuilder The developer can dynamically change the content of the routing animation based on the current page. For example, right? BottomSheet Change the height, rounded corners, etc., to suit different scenarios.

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

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

Commonly used wx://bottom-sheet Preset route routeOptions Add the following attributes

# Sample code snippet

{% Minicode ('BGoSE0mS7KQS') %}