三合一网站建设公司,多多进宝cms网站建设,如何做好一个百度竞价网站,口碑好的做网站公司哪家好一、自定义状态栏
可以设置某个页面的状态栏自定义或者全局状态栏自定义。
这里以首页状态栏为例。
1#xff09;pages.json 中配置navigationStyle: custom#xff0c;代码如下#xff1a;
{pages: [ {path: pa…一、自定义状态栏
可以设置某个页面的状态栏自定义或者全局状态栏自定义。
这里以首页状态栏为例。
1pages.json 中配置navigationStyle: custom代码如下
{pages: [ {path: pages/index/index,style: {navigationStyle: custom,navigationBarTitleText: 首页}}],globalStyle: {// 如果要配置全局自定义状态就是下面这行代码// navigationStyle: custom//...}
}2增加自定义状态栏组件CustomNavbar.vue
因每台手机的顶部预留高度不一样需要通过方法uni.getSystemInfoSync() 获取顶部安全区域高度然后通过样式预留出来。
下面代码通过设置样式 paddingTop: safeAreaInsets?.top px预留顶部安全高度
templateview :style{ paddingTop: safeAreaInsets?.top px }uni-nav-bar shadow :borderfalse title自定义导航栏 leftIconarrow-left leftText首页/uni-nav-bar/viewuni-search-bar radius5 placeholder自动显示隐藏 clearButtonauto cancelButtonnone confirmsearch /
/templatescript setup langts
const { safeAreaInsets } uni.getSystemInfoSync()
console.log(safeAreaInsets, safeAreaInsets);const search (res: any) {uni.showToast({title: 搜索 res.value,icon: none});}
/scriptstyle scoped
/style3在首页vue页面中使用组件CustomNavbar.vue
templatecustom-navbar/view classcontent!-- 其他内容 --/view
/templatescript setup langts
import { ref } from vue
import CustomNavbar from ../components/CustomNavbar.vue;
// ...... //
/script
