Uniapp自定义导航栏

1.准备自定义导航栏组件



2.修改页面配置,隐藏默认导航栏,修改文字颜色

// src/pages.json
{
  "path": "pages/index/index",
  "style": {
    "navigationStyle": "custom", // 隐藏默认导航
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "首页"
  }
}

3.样式适配 -> 安全区域

不同手机的安全区域不同,为防止页面内容被遮挡,通过 uni.getSystemInfoSync() 获取屏幕边界到安全区的距离



4.首页中即可引入自定义组件

你可能感兴趣的:(uni-app,前端)