Uniapp去除顶部导航栏-小程序、H5、APP适用

news/2024/11/8 12:27:10 标签: uni-app, 小程序, uniapp, vue.js, 微信小程序

在 UniApp 中,"globalStyle" 配置项用于设置全局样式,特别是用于小程序、App 和 H5 页面上的导航栏样式。

1. 修改 pages.json 配置(局部配置)

如果你希望特定页面去除顶部导航栏,可以在pages配置"navigationStyle": "custom"实现:

小程序、H5、APP端适用

pages.json 中配置小程序页面的导航栏:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom" // 去除对应页面的导航栏
      }
    }
  ]
}

2. 检查 globalStyle 配置(全局配置)

globalStyle 配置中,titleNView: false 对H5、App 端有效,而不适用于小程序。下面是一个通用的 globalStyle 配置示例:

"globalStyle": {
  "navigationBarTextStyle": "black", // 导航栏文字颜色
  "navigationBarTitleText": "xxxx", // 导航栏标题
  "navigationBarBackgroundColor": "#F8F8F8", // 导航栏背景色
  "backgroundColor": "#F8F8F8", // 页面背景色
  "titleNView": false, // 去除App、H5的顶部导航
  "navigationStyle": "custom"//去除小程序顶部导航栏
}

注意:

  • App端"titleNView": false 去除系统的导航栏,这时你可以使用 navigationStyle: 'custom' 配合自定义的 NView 来创建自己的顶部导航。
  • H5端"titleNView": false 可以直接去掉浏览器的默认导航栏,通常是指顶部的页面标题栏,适合用于自定义布局。

小结:

  • H5端"titleNView": false 会去除顶部浏览器的默认导航栏。
  • App端"titleNView": false 也会去除系统的默认导航栏,你需要自定义导航栏。
  • 小程序:配置 navigationStyle: "custom" 来去除系统的顶部导航栏。

这样,在你去除顶部导航栏后,可以根据需求实现自定义的导航栏,或者仅保留页面内容而不显示任何默认的导航元素。


http://www.niftyadmin.cn/n/5743896.html

相关文章

Python中文本类型和列表类型的相互转换

目录 1. 将str转换为list2. 应用场景2.1 API数据接收2.2 WEB开发 3. 将数据转换为str3.1 str函数3.2 json.dumps函数3.3 对比 4. 应用场景 1. 将str转换为list 在Python中,可以通过ast.literal_eval函数来实现,它能够安全地评估一个字符串,并…

Redis - 数据库管理

Redis 提供了⼏个⾯向Redis数据库的操作,分别是dbsize、select、flushdb、flushall命令, 本机将通过具体的使⽤常⻅介绍这些命令。 一、切换数据库 select dbIndex 许多关系型数据库,例如MySQL⽀持在⼀个实例下有多个数据库存在的&#…

C语言复习第7章 自定义类型(结构体+位段+枚举+联合体)

目录 一、结构体1.1 内置类型和自定义类型1.2 结构体的概念1.3 结构体基本的声明1.4 区分两种创建结构体变量的方式1.5 结构体变量的定义和初始化1.6 区分一下typdef和变量列表1.7 匿名结构体类型1.8 访问结构体成员1.9 修改字符数组成员变量的时候 要用strcpy1.10 结构体的传参…

一七五、HTML 不同类型的事件及其说明和示例

HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。 Window 事件 1. onresize 当浏览器窗口的大小发生变化时触发。 <!DOCTYPE html> <html lang"en"> <head><m…

数据库交互的本地项目:后台管理系统

使用的应用 Visual Studio Code项目编辑器phpstudy_pro启动数据库数据库文件存储数据 确定项目 后台管理系统包括登录界面&#xff0c;主界面&#xff0c;个人主页&#xff0c;管理查找编辑系统&#xff0c;在进行项目前需要先对项目进行大致分类&#xff0c;例如基础的框架搭…

数据采集之selenium模拟登录

使用Cookijar完成模拟登录 本博文爬取实例为内部网站&#xff0c;请sduter使用本人账号替换*********&#xff08;学号&#xff09;&#xff0c;***&#xff08;姓名&#xff09;进行登录 from selenium import webdriver from selenium.webdriver.common.by import By from…

ubantu git

#安装git 1、更新包列表 $ sudo apt-get update 2、install git server $ apt install git-core 3.create user of git manage $ adduser git 4.创建仓库并设置权限 $ mkdir -p /home/git/repositories $ chown git:git /home/git/repositoies 5.初始化仓库并配置所属权限 $ cd…

[asdf] 管理erlang 版本--ubuntu 16.04

部分网址 asdf 官网&#xff1a;快速入门 | asdf elang 插件网址&#xff1a;https://github.com/asdf-vm/asdf-erlang rebar 插件网址&#xff1a;https://github.com/Stratus3D/asdf-rebar 安装asdf 先安装依赖,默认装了git 可只安装curl apt install curl git 2、安装as…