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.config.ts export default { navigationStyle: 'custom' }
Copy 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# import * as React from 'react' import { View } from '@binance/mp-components' import './CustomNavigationBar.scss'
export default function CustomNavigationBar ( { title = "custom nav bar" , } : Props ) { return < View className = ' cnb-container ' > < View className = ' custom-nav-bar ' > < View className = ' custom-nav-bar-title ' > { title } </ View > </ View > </ View > }
Copy .cnb-container { position : relative ; padding : 0 10 px ; 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 : 95 px ; right : 95 px ; height : 100 % ; display : flex ; align-items : center ; justify-content : center ; top : 0 ; display : flex ; align-items : center ; box-sizing : border-box ; }
Copy Usage# export default { navigationStyle : 'custom' }
Copy import * as React from 'react' import { View } from '@binance/mp-components' import CustomNavigationBar from './CustomNavigationBar' import withProviders from '../../../../common/withProviders' import './navigation.scss'
function Page ( ) { return ( < View className = ' container ' > < CustomNavigationBar title = ' Custom Navigation Bar ' loading = { loading } show = { show } color = { color } background = { background } back = { true } paddingTop = { safeAreaTop } /> </ View > ) }
export default withProviders ( Page )
Copy and you can see
add "navigationStyle": "custom"
to your {page}/{page}.json
{ "navigationBarTitleText" : "web-view" , "usingComponents" : { "nav-component" : "/custom-nav-bar/custom-nav-bar" } , "navigationBarTextStyle" : "white" , "backgroundColor" : "#eeeeee" , "backgroundTextStyle" : "dark" , "navigationStyle" : "custom" }
Copy add custom-nav-bar
folder to root directory
├── custom-nav-bar.bxml └── custom-nav-bar.json
Copy Tabbar# configrue tabBar.custom: true
to src/app.config.ts
tabBar : { custom : true }
Copy add custom-tab-bar
in src
custom-tab-bar ├── index.scss └── index.tsx
Copy Similar to 'custom navigate bar', you need to implement a 'custom tab bar' yourself`
you can see
configrue tabBar.custom: true
to app.json
"tabBar" : { "custom" : true }
Copy add custom-tab-bar
in root directory
custom-tab-bar ├── index.bxml ├── index.bxss ├── index.js └── index.json
Copy you need to implement a custom tab bar
yourself
you can refer to wechat
disableBounces# Set disableBounces: true
in your {page}.config.js
.
It prevents the page from sliding out of the screen area (only IOS)
export default { disableBounces : true }
Copy In iOS Simulator to preview