笔记大全

uniapp如何去除原生标题栏

更新时间：2023-07-13

什么是 uniapp？

uniapp 是一个使用 Vue.js 构建跨平台应用程序的开发框架。它支持一次编写，多端发布，即使用相同的源代码，开发者可以将应用程序发布到多个平台，如小程序、H5、App 等。

标题栏是什么？为什么需要去除？

标题栏是指应用程序的顶部栏，通常包含应用程序的名称、返回按钮等。在小程序、App 等平台中，标题栏已经被定制为了相应平台的风格，但有时候开发者可能需要将标题栏去除，以满足自身的需求。比如，在开发需求仅需要一个全屏展示的页面时，去除标题栏将会更加美观、舒适。

如何去除 uniapp 原生标题栏？

1.在 App.vue 中去除标题栏。

<template>
  <div>
    <router-view />
  </div>
</template>

<script>
  export default {
    onLaunch () {
      uni.hideNavigationBar()
    }
  }
</script>

2.在 page.vue 中去除标题栏。

<template>
  <view>
    </view>
</template>

<script>
  export default {
    onLoad () {
      uni.hideNavigationBar()
    }
  }
</script>

代码解释

在 App.vue 中，我们可以使用 uni.hideNavigationBar() 函数来隐藏标题栏。在 onLaunch 生命周期函数中调用该函数，可以保证在应用程序启动时，标题栏已被隐藏。

在 page.vue 中，我们可以使用 uni.hideNavigationBar() 函数来隐藏标题栏。在 onLoad 生命周期函数中调用该函数，可以保证在页面加载时，标题栏已被隐藏。需要注意的是，在该页面返回上一级页面时，默认将会展示原有的标题栏，需要使用 onUnload 生命周期函数将标题栏再次隐藏。

总结

通过上述示例，我们可以了解到如何在 uniapp 中去除原生标题栏。开发者需要通过调用 uni.hideNavigationBar() 函数来实现去除标题栏的操作。在 App.vue 和 page.vue 中分别调用该函数，可以对于应用程序或者单独页面进行去除标题栏的操作。在仅需要在单独页面去除标题栏时，需要注意 onUnload 生命周期函数的使用。

c语言编程笔录