广州建设外贸网站,dedecms做自适应网站,网站开发开题报告关键问题,网络彩票建立网站开启页面自定义导航栏功能
uniapp 在 pages.json 页面设置了全局的 globalStyle 的 navigationStyle: custom 或单页面的 style 的 navigationStyle: custom 之后页面顶部就没有自带的导航栏了#xff0c;这时用户可自定义该…开启页面自定义导航栏功能
uniapp 在 pages.json 页面设置了全局的 globalStyle 的 navigationStyle: custom 或单页面的 style 的 navigationStyle: custom 之后页面顶部就没有自带的导航栏了这时用户可自定义该页面的顶部导航栏。
示例代码
HTML
templateview classpageview :style{width: 100%, height: statusBarHeight px}/viewview classtop-tab flex-c :style{height: navHeight px}view classtitle v-iftitle{{title}}/view/view/view
/template
js(示例为vue 3 的 js)
script setupimport {ref,reactive} from vue// 手机屏幕信息const window uni.getWindowInfo()// 胶囊信息let menu uni.getMenuButtonBoundingClientRect()const statusBarHeight ref(0)statusBarHeight.value window.statusBarHeight // 手机状态栏高度const navHeight ref(0)navHeight.value (menu.top - window.statusBarHeight) * 2 menu.height // 导航栏高度/script
以上就是关于 uniapp 自定义页面状态栏的核心代码了这样的自定义状态栏是自动适配手机的状态栏的。
