uniapp如何隐藏webview标题

在uniapp中使用webview组件时，如何隐藏顶部的标题栏？我尝试设置navigationBarTitleText为空，但依然显示默认标题，请问有什么方法可以彻底隐藏webview的标题栏？

2 回复

在pages.json中配置当前页面的style：

"style": {
  "navigationBarTitleText": "",
  "app-plus": {
    "titleNView": false
  }
}

在 UniApp 中，Webview 组件默认会显示标题栏，但可以通过配置隐藏。以下是具体方法：

方法一：使用 webview 组件的 show-title 属性

在 pages.json 中配置页面时，将 show-title 设为 false。

{
  "path": "pages/webview/webview",
  "style": {
    "navigationBarTitleText": "",
    "app-plus": {
      "titleNView": false
    }
  }
}

方法二：动态隐藏标题栏

在 Webview 页面中，通过 uni-app API 动态隐藏标题栏。

onLoad(options) {
  // 隐藏导航栏
  uni.hideNavigationBarLoading();
  // 可选：设置页面标题为空
  uni.setNavigationBarTitle({
    title: ''
  });
}

注意事项：

  1. 平台差异：app-plus 配置仅适用于 App 端，H5 和小程序需使用各自平台的配置。
  2. H5 端：在 H5 中，标题栏通常由浏览器控制，无法直接隐藏。
  3. 小程序端：需在对应平台的配置中设置 navigationBarTitleText 为空。

根据你的需求选择合适的方法即可。

回到顶部