当前位置:网站首页>Development of user-defined navigation bar in uniapp
Development of user-defined navigation bar in uniapp
2022-07-04 01:12:00 【Talking characters】
In my eyes, custom navigation points 2 class : On the original basis || On a non-native basis
summary : The project can be native , Improve performance difference
uni-app With native navigation bar , stay pages.json Internal configuration .
The experience of native navigation is better , When rendering a new page , The rendering of the native navigation bar does not need to wait for a new page dom load , You can render when the new page enters the animation .
Native navigation can also avoid scrolling through the top , And easily control the native pull-down refresh .
adopt pages.json Configuration of , It can be simple 、 Cross end 、 High performance development business .
But the expansion ability of the native navigation bar is limited . Especially under wechat , Not many navigation bar configurations are provided .
stay App Next ,pages.json Of every page in app-plus You can set titleNView More parameters , You can get richer scalability than wechat applet .
in addition , Developers can also cancel the native navigation bar if necessary , Use view Draw the navigation bar by yourself .
On the original basis
- adopt app-plus Attribute extension for custom navigation
https://uniapp.dcloud.io/collocation/pages?id=app-plus
A document description :
1. When native navigation can meet business needs , Try to use native navigation , Sometimes we even need to sacrifice some unimportant needs .
2. stay App and H5 Next ,uni-app It provides a flexible processing scheme :`titleNView、subNVue`、 Or use the whole page nvue.
3. But under the applet , Because of its own limitations , There is no good plan . If necessary , You can also use conditional compilation for end-to-end processing .
So the main thing is to use app-plus Of titleNView( The navigation bar )、subNVue( child window ) attribute
- titleNView( The navigation bar ) All of the following are in titleNView Operation under attribute
https://uniapp.dcloud.io/collocation/pages?id=app-titlenview
Commonly used are button attributes :https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-buttons
titleNView.buttons.type
except type Documents have other properties
"buttons": [{"type": "menu"},{"type": "favorite"}]
Other types
"forward": Forward button "back": Back button
"share": Share button "favorite": Collection button
"home": Home button "menu": Menu buttons
"close": close button "none": No style , Don't show icons
Custom back button
titleNView.backButton
Usage follows button equally , But it needs to be in autoBackButton Set to true Effective when
https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-backbuttonstyles
titleNView.< Other attributes >
https://uniapp.dcloud.io/collocation/pages?id=app-titlenview
Out button and back button There are other properties such as
searchInput Search box configuration on native navigation bar
homeButton Whether the title bar control displays Home Button
backgroundImage Background image path wait
The life cycle of these buttons
// The event parameter e.index The value is to click the button in buttons Index value of array , from 0 Start
onNavigationBarButtonTap(e) Click event of this lifecycle monitoring button
// When a search box is set, the life cycle of the search box
onNavigationBarSearchInputChanged()// The content of the search box changes
onNavigationBarSearchInputConfirmed()// Search events are also carriage return events of mobile phones
How to change these buttons
webView Object documents and other methods https://www.html5plus.org/doc/zh_cn/webview.html#
Search for WebviewObject Keyword No 47 A place
// #ifdef APP-PLUS
var webView = this.$mp.page.$getAppWebview(); // You have to get webview object
webview.showTitleNViewButtonRedDot()// The calling method displays a red dot
webview.showTitleNViewButtonRedDot()// Call method to hide red dot
webview.setTitleNViewButtonBadge()// Modify the red dot corner mark
webview.setTitleNViewButtonStyle()// Modify button
// #endif
These are based on the original app-plus Of titleNView( The navigation bar ), There's another. subNVue( child window ) attribute
- subNVue( child window ) attribute All of the following are in subNVue( child window ) Operation under attribute
To configure
subNVue.style
https://uniapp.dcloud.io/collocation/pages?id=app-subnvuesstyle
subNVue yes vue Subform of the page , It's not a full screen page , Is used to solve vue It is used for the level coverage in the page and the customization of the native interface . Nor is it a component , It's a primitive child form
nvue Quick start
https://uniapp.dcloud.io/nvue-outline?id=_1%e6%96%b0%e5%bb%banvue%e9%a1%b5%e9%9d%a2
Method
const subNVue = uni.getSubNVueById(' Of the original subform ID'); Get child window object
For developing pop-up windows and navigation
subNVue Object method
https://uniapp.dcloud.io/api/window/subNVues?id=app-getsubnvuebyid
nvue Follow vue Communication of
https://ask.dcloud.net.cn/article/36010
On a non-native basis
Global cancel native navigation bar "navigationStyle":"custom"
- 1. Cancel the native navigation bar
"navigationStyle":"custom"
The problems brought about by : Some new components have solved this problem . status bar ( The column showing the power , Not the navigation bar ), The navigation bar is directly trapped .
- 2. Handle status bar issues
App Because the default is immersive , After removing the navigation bar , The top of the page will go directly to the area of the status bar
uni-app Built in CSS Variable solving
https://uniapp.dcloud.io/frame?id=css%E5%8F%98%E9%87%8F
After writing the code, it directly solves my problem
<!-- #ifdef APP-PLUS -->
<view class="status_bar">
<view class="top_view"></view>
</view>
<!-- #endif -->
/*
* !!! Then put your own navigation component under it
* https://ext.dcloud.net.cn/plugin?id=52( I think this is ok )
*/
//css part
.status_bar {
height: var(--status-bar-height);
width: 100%;
background-color: #F8F8F8;
}
.top_view {
height: var(--status-bar-height);
width: 100%;
position: fixed;
background-color: #F8F8F8;
top: 0;
z-index: 999;
}
- 3.H5、 Applet 、App The end status bar is different , It needs to be recalculated , Here is the code handled by others
Use it directly , stay App.vue Just set it inside
onLaunch: function() {
uni.getSystemInfo({
success:function(e){
Vue.prototype.statusBar = e.statusBarHeight
// #ifndef MP
if(e.platform == 'android') {
Vue.prototype.customBar = e.statusBarHeight + 50
}else {
Vue.prototype.customBar = e.statusBarHeight + 45
}
// #endif
// #ifdef MP-WEIXIN
let custom = wx.getMenuButtonBoundingClientRect()
Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
// #endif
// #ifdef MP-ALIPAY
Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
// #endif
}
})
},
After disabling native navigation You can also change the style through the interface
https://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.setStatusBarStyle
After disabling the native navigation bar on the page , You can still set the of the page navigationBarTextStyle attribute
Pay attention to some low-end Android mobile phone (4.4) Setting the status bar foreground is not supported by itself .
边栏推荐
- [common error] UART cannot receive data error
- It's OK to have hands-on 8 - project construction details 3-jenkins' parametric construction
- 手机异步发送短信验证码解决方案-Celery+redis
- Swagger2 quick start and use
- Flutter local database sqflite
- MySQL uses the view to report an error, explain/show can not be issued; lacking privileges for underlying table
- Sequence list and linked list
- 不得不会的Oracle数据库知识点(四)
- Typescript basic knowledge sorting
- Fundamentals of machine learning: feature selection with lasso
猜你喜欢
How can enterprises optimize the best cost of cloud computing?
Beijing invites reporters and media
手机异步发送短信验证码解决方案-Celery+redis
在寻求人类智能AI的过程中,Meta将赌注押向了自监督学习
0 basic learning C language - nixie tube dynamic scanning display
Cloud dial test helps Weidong cloud education to comprehensively improve the global user experience
[prefix and notes] prefix and introduction and use
Introduction to A-frame virtual reality development
How to delete MySQL components using xshell7?
Weekly open source project recommendation plan
随机推荐
Decompile and modify the non source exe or DLL with dnspy
Related configuration commands of Huawei rip
[prefix and notes] prefix and introduction and use
Oracle database knowledge points (IV)
Function: store the strings entered in the main function in reverse order. For example, if you input the string "ABCDEFG", you should output "gfedcba".
Release and visualization of related data
PMP 考试常见工具与技术点总结
长文综述:大脑中的熵、自由能、对称性和动力学
Future源码一观-JUC系列
What insurance products should be bought for the elderly?
Day05 table
在寻求人类智能AI的过程中,Meta将赌注押向了自监督学习
不得不会的Oracle数据库知识点(一)
2-Redis架构设计到使用场景-四种部署运行模式(下)
MPLS experiment
Ka! Why does the seat belt suddenly fail to pull? After reading these pictures, I can't stop wearing them
不得不会的Oracle数据库知识点(四)
Regular expression of shell script value
HR disgusted interview behavior
Gauss elimination method and template code