uniapp configures the button on the right side of the navigation bar
1. pages.json configuration
The buttons on the right side of the uniapp navigation bar are configured in pages.json,pages[].style.app-plus.titleNView.buttons
{
"path": "pages/devices/Air/Air",
"style": {
"navigationBarTitleText": "精密空调",
"enablePullDownRefresh": true,
"app-plus": {
"bounce": "none",
"titleNView": {
"buttons": [
{
"fontSize": "15px",
"text": "配置"
},
{
"fontSize": "15px",
"text": "信息"
}
],
"backButton": {
"background": "#00FF00"
}
}
}
}
},
Two, the effect
Then its two buttons are displayed in the upper right corner
3. How to respond to the click event of the button
onNavigationBarButtonTapNeed to add this lifecycle method to the current page
onNavigationBarButtonTap(event) {
console.log('nav button pressed', event)
},
When the button is clicked, the content of the click event will be passed to this method in the form of object
Its content is like this:
when using it, textthe content of the general judgment is enough
Refer to the official document:
https://uniapp.dcloud.net.cn/collocation/pages.html#app-titlenview