Skip to main content

Extended

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
}