uni-app 微信小程序 web-view 页设置 "navigationStyle" : "custom" 无效，导航栏不会隐藏

uni-app 微信小程序 web-view 页设置 “navigationStyle” : “custom” 无效，导航栏不会隐藏

示例代码：

<template>  
    <web-view :src="url" />  
</template>

{  
    "path": "pages/index/index",  
    "style": {  
        "mp-weixin":{  
            "navigationStyle" : "custom"          
        }  
    }  
}

操作步骤：

微信小程序web-view页，设置"navigationStyle" : "custom"无效，导航栏不会隐藏

预期结果：

“navigationStyle” : “custom”，web-view页原生导航栏会隐藏

实际结果：

“navigationStyle” : “custom”，web-view页原生导航栏不会隐藏

bug描述：

【报Bug】微信小程序web-view页，设置"navigationStyle" : "custom"无效，导航栏不会隐藏。非web-view页设置会隐藏


| 开发环境 | 版本号       | 项目创建方式 |
|----------|--------------|--------------|
| Windows  | Windows 10   | HBuilderX    |
|          | 家庭中文版   |              |
| HBuilderX| 3.3.13       |              |
| 第三方开发者工具 | 3.3.13.20220314 |              |
| 基础库   | 2.23.4       |              |
|          |              |              |

更多关于uni-app 微信小程序 web-view 页设置 "navigationStyle" : "custom" 无效，导航栏不会隐藏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom 对 web-view 组件无效。详见文档

更多关于uni-app 微信小程序 web-view 页设置 "navigationStyle" : "custom" 无效，导航栏不会隐藏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，如果你在微信小程序中使用 web-view 组件，并且希望隐藏导航栏（即设置 "navigationStyle": "custom"），可能会遇到设置无效的情况。这是因为微信小程序对 web-view 组件的导航栏样式有一些限制。

原因分析

微信小程序的 web-view 组件默认会显示导航栏，并且无法通过 "navigationStyle": "custom" 来隐藏它。这是因为 web-view 组件的导航栏是由微信小程序框架控制的，开发者无法直接修改或隐藏它。

解决方案

虽然无法直接通过 "navigationStyle": "custom" 来隐藏 web-view 的导航栏，但你可以通过以下方式来实现类似的效果：

  1. 使用自定义导航栏：

    • 你可以在 web-view 组件上方自定义一个导航栏，并通过 CSS 或 JavaScript 来控制其显示和隐藏。
    • 这样，虽然微信小程序的导航栏仍然存在，但你可以通过自定义导航栏来覆盖它，达到隐藏的效果。

  2. 使用 wx.hideNavigationBarLoading 和 wx.hideHomeButton：

    • 你可以尝试使用微信小程序的 API 来隐藏导航栏的某些元素，例如 wx.hideNavigationBarLoading 和 wx.hideHomeButton。
    • 这些 API 可以帮助你隐藏导航栏中的加载动画和返回首页按钮，但无法完全隐藏导航栏。

  3. 使用 wx.setNavigationBarTitle：

    • 你可以通过 wx.setNavigationBarTitle 来设置导航栏的标题，使其看起来更简洁。

  4. 使用 wx.setNavigationBarColor：

    • 你可以通过 wx.setNavigationBarColor 来设置导航栏的背景颜色和文字颜色，使其与页面背景颜色一致，从而达到视觉上隐藏的效果。

示例代码

// 在页面的 onLoad 生命周期中调用
onLoad() {
  // 设置导航栏颜色为透明
  wx.setNavigationBarColor({
    frontColor: '#ffffff', // 前景颜色
    backgroundColor: '#00000000', // 背景颜色为透明
  });

  // 隐藏导航栏加载动画
  wx.hideNavigationBarLoading();

  // 隐藏返回首页按钮
  wx.hideHomeButton();
}
回到顶部