Extended

Navigators

Navigation

Navigation is the navigator component on top of the Mini Program. Using navigationStyle: custom, you can replace the default navigation with a custom component.

// page.json{  "navigationStyle": "custom"}

With this configuration, the default navigation bar on the current page will be removed. You will need to implement a component on your own page to replace it.

Custom Navigation Bar Example

//custom-navigation-bar.json{  "navigationStyle": "custom"}

<!-- custom-navigation-bar.bxml --><view class='cnb-container'>    <view class='custom-nav-bar'>      <view class='custom-nav-bar-title'>{title}</view>    </view></view>

Page({  data: {    title: 'Hello world'  }})

//  custom-navigation-bar.bxss.cnb-container {  position: relative;  padding: 0 10px;  height: var(--mp-navigator-height);  display: flex;  align-items: center;  justify-content: space-between;  background-color: #000000;  color: white;}.custom-nav-bar {  position: absolute;  left: 95px;  right: 95px;  height: 100%;  display: flex;  align-items: center;  justify-content: center;  top: 0;  display: flex;  align-items: center;  box-sizing: border-box;}

Tabbar

• Bxml

Configure tabBar.custom: true in app.json

"tabBar": {  "custom": true}

Add custom-tab-bar in root directory

custom-tab-bar├── index.bxml├── index.bxss├── index.js└── index.json

You will need to implement a custom tab bar yourself

Disable Bounces

Set disableBounces: true in your {page}.json.

This prevents the page from sliding out of the screen area (only IOS)

export default {  disableBounces: true}