uniapp中如何去掉顶部导航栏

1. 介绍

uniapp是一个跨多个平台、使用Vue.js构建的开发框架。在uniapp中，可以编写一次代码，同时生成多个平台的版本（微信小程序、支付宝小程序、H5、安卓APP、IOS APP等）。在开发uniapp应用时，有时需要自定义顶部导航栏，或者干脆将顶部导航栏去掉。本文会介绍uniapp中如何去掉顶部导航栏。

2. 去掉顶部导航栏的方法

2.1 在manifest.json文件中设置

manifest.json是uniapp的配置文件，在这个文件中可以设置一些应用的全局配置。如果想去掉顶部导航栏，可以在manifest.json中设置：

"appPlus": {

  "navigationBarHidden": true
}

说明：上面的代码中，appPlus是用于uni-app打包app的配置项，navigationBarHidden用于隐藏原生导航栏。将其设置为true则代表隐藏原生导航栏，即在应用中去掉顶部导航栏。

2.2 在页面中设置

如果只想在某些特定页面中去掉顶部导航栏，也可以在页面中设置。在vue单文件组件中，可以通过设置页面的meta信息来控制顶部导航栏的显示与隐藏。

<template>
  <view>页面内容</view>
</template>
<script>
export default {
  metaInfo: {
    title: '页面标题',
    //隐藏顶部导航栏
    plus:{
      navigationBarHidden:true
    }
  },
}
</script>

说明：上面的代码中，通过设置metaInfo.plus.navigationBarHidden为true，即可在页面中隐藏原生导航栏。

2.3 在代码中动态设置

如果想在运行时动态地控制顶部导航栏的显示与隐藏，可以通过在代码中设置顶部导航栏的样式来实现。具体方法为，通过uni.setNavigationBarStyle()方法设置导航栏样式。

export default {
  mounted() {
    uni.setNavigationBarStyle({
      //隐藏导航栏
      navigationBarHidden: true,
    });
  },
}

说明：上面的代码中，通过调用uni.setNavigationBarStyle()方法可以设置导航栏的样式。将navigationBarHidden设置为true则代表隐藏原生导航栏，即在应用中去掉顶部导航栏。

3. 总结

本文介绍了在uniapp中去掉顶部导航栏的三种方法：在manifest.json中设置、在页面中设置、在代码中动态设置。使用这几种方法即可在uniapp应用中去掉顶部导航栏。