Framework

Extended

Copy page

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.

Code
// 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

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

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

Code
Page({
  data: {
    title: "Hello world",
  },
});

Code
//  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

Code
"tabBar": {
  "custom": true
}

Add custom-tab-bar in root directory

Code
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)

Code
export default {
  disableBounces: true,
};