Extended

Navigators

Navigation

Navigation is the navigator component on top of Mini Program. With navigationStyle: custom, you can use custom component to replace the origin one.

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

Once configured in this way, the default 'navigate bar' in current page will be removed. You need to implement a component in your own page to replace it.

custom nav bar example

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

<--! custom-navigation-bar.bxml --><view className='cnb-container'>    <view className='custom-nav-bar'>      <view className='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

configrue tabBar.custom: true to app.json

"tabBar": {  "custom": true}

add custom-tab-bar in root directory

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

you need to implement a custom tab bar yourself

disableBounces

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

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

export default {  disableBounces: true}