uni-app配置APP自定义顶部标题栏设置方法与注意事项

目录
  • pages.json文件
  • 页面部分或首页部分
  • 注意:
  • 附:uni-app如何动态设置页面的标题
    • 1. 新建页面
    • 2. js动态修改标题
  • 总结

当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏

pages.json文件

代码块

//页面配置
"path": "pages/index/index",
        "style": {
            "app-plus": { //app配置自定义导航
                "titleNView": false //app禁止使用原神导航
            }
        }
},

"globalStyle": {

        "navigationStyle":"custom",//禁用原生导航

    }

页面部分或首页部分

代码块

<template>
    <view class="status_bar"><!-- 这里是状态栏 --></view>
    <view class="box-fel">
    <!--状态栏下的文字 -->
        <view>
            <image style="width: 100rpx; height: 100rpx;" src="../../static/logo.png">        </image>
        </view>
        <view>关注</view>
        <view>发现</view>
        <view>附近</view>
        <view>搜索</view>
    </view>
</template>

<style lang="scss">
    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }
</style>

注意:

  • var(--status-bar-height) 此变量在微信小程序环境为固定 25px,在 App 里为手机实际状态栏高度。
  • 当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏。
  • 由于在 H5 端,不存在原生导航栏和 tabbar,也是前端 div 模拟。如果设置了一个固定位置的居底 view,在小程序和 App 端是在 tabbar 上方,但在 H5 端会与 tabbar 重叠。此时可使用--window-bottom,不管在哪个端,都是固定在 tabbar 上方。
  • 目前 nvue 在 App 端,还不支持 --status-bar-height变量,替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度,然后通过 style 绑定方式给占位 view 设定高度。

附:uni-app如何动态设置页面的标题

1. 新建页面

正常情况下,在创建页面时会在pages.json里生成一段代码,即可在内调整页面的标题。如图:

效果如图:

这种方式可已满足大多数人的需求,但是总有那么一些人需求比较不同。希望能够在页面内进行动态的调整标题,那么该如何进行设置呢?

2. js动态修改标题

代码如下:

<script>
	export default {
		data() {
			return {
				dynamicTitle: '这里是动态标题',
			};
		},
		onLoad() {
			// 官网API:https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbartitle
			uni.setNavigationBarTitle({
				title: this.dynamicTitle,
				success: () => {
					console.log('修改标题成功')
				},
				fail: () => {
					console.log('修改标题失败')
				},
				complete: () => {
					console.log('修改标题结束')
				},
			})
		}
	}
</script>

效果如图:

总结

到此这篇关于uni-app配置APP自定义顶部标题栏设置方法与注意事项的文章就介绍到这了,更多相关uni-app自定义顶部标题栏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

  • 如何用uni-app实现顶部导航栏显示按钮和搜索框

    最近公司准备做app,最终决定使用uni-app框架开发,但是当把设计图给我的时候我心里有点没底,因为他的设计图顶部长成这个样子: 因为这个功能在小程序是根本无法实现的,可能受这个影响,我感觉好像实现不了,但是我还是回头看了看文档,才发现,这个功能是可以实现的,只需要在pages.json中做一些配置即可 这个在官方称作app-plus,可以自定义导航区域,具体配置如下: "pages": [ { "path": "pages/index/index&qu

  • uni-app配置APP自定义顶部标题栏设置方法与注意事项

    目录 pages.json文件 页面部分或首页部分 注意: 附:uni-app如何动态设置页面的标题 1. 新建页面 2. js动态修改标题 总结 当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置.此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏 pages.json文件 代码块 //页面配置 "path"

  • Android自定义顶部标题栏

    本文实例为大家分享了Android自定义顶部标题栏展示的具体代码,供大家参考,具体内容如下 思路及实现步骤 1.定义标题栏布局 2.自定义TitleActivity控制标题栏按钮监听 3.在TitleActivity中实现标题栏以下内容切换 首先定义标题栏 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android

  • linux操作系统下配置ssh/sftp和权限设置方法

    基于 ssh 的 sftp 服务相比 ftp 有更好的安全性(非明文帐号密码传输)和方便的权限管理(限制用户的活动目录). 1.开通 sftp 帐号,使用户只能 sftp 操作文件, 而不能 ssh 到服务器 2.限定用户的活动目录,使用户只能在指定的目录下活动,使用 sftp 的 ChrootDirectory 配置 确定版本 #确保 ssh 的版本高于 4.8p1 否则升级一下 一般都高于这个版本 ssh -V 新建用户和用户组 #添加用户组 sftp groupadd sftp #添加用户

  • 正确配置与维护Apache安全性设置方法

    一,Apache服务器的介绍 Apache服务器它是Internet网上应用最为广泛的Web服务器软件之一.Apache服务器源自美国国家超级技术计算应用中心(NCSA)的 Web服务器项目中.目前已在互联网中占据了领导地位.Apache服务器得经过精心配置之后,才能使它适应高负荷,大吞吐量的互联网工作.快速.可靠.通过简单的API扩展,Perl/Python解释器可被编译到服务器中,且完全免费,完全源代码开放.如果你需要创建一个每天有数百万人访问的Web服务器,Apache可能是最佳选择. 二

  • Oracle数据远程连接的四种设置方法和注意事项

    第一种情况: 若oracle服务器装在本机上,那就不多说了,连接只是用户名和密码的问题了.不过要注意环境变量%ORACLE_HOME%/network/admin/是否设置. 第二种情况: 本机未安装oracle服务器,也未安装oracle客户端.但是安装了pl sql development.toad sql development.sql navigator等管理数据库的工具.在虚拟机或者另一台电脑上安装了oracle服务器,也就是虚拟机或者另一台电脑此时作为服务器. 这种情况下,本人以pl

  • Android自定义简单的顶部标题栏

    本文实例为大家分享了Android实现简单顶部标题栏的具体代码,供大家参考,具体内容如下 实现功能: 1)自定义View标题栏布局: 2)灵活的可以自己传入类型,选择所需要的控件来显示隐藏 3)相对于我之前写过的一篇,免继承,可直接在布局里使用 4)直接可以在布局控件里设置属性 老规矩,上几张效果图: 由效果图可见,这个是可以根据传入type来控制,比较灵活的 下面就来实现以下步骤,最后我会贴上源码 1.创建一个布局文件,命名,layout_titlebar,来部署我们的标题栏样式,可以自定义更

  • nodejs教程 安装express及配置app.js文件的详细步骤

    安装express.js 如果你安装了npm,安装变得很简单,只需要在终端中运行下面的代码即可: 复制代码 代码如下: npm install express -gd -g代表安装到NODE_PATH的lib里面,而-d代表把相依性套件也一起安装.如果沒有-g的话会安装目前所在的目录(会建立一个node_modules的文件夹),你可以透过以下指令来比较两者的不同: 复制代码 代码如下: npm list -gnpm list 如果没有npm,那么我可以使用github来git下来最新的expr

  • django配置app中的静态文件步骤

    配置静态文件的两种方式: 1 配置单独app下的静态文件,比如某个app下的单独的图片. 2 配置整个project下的静态文件,适用于那些和单独app关联不大的文件,比如jquery bootstrap 等等 配置步骤: 首先,我们需要确认在settings.py文件中的INSTALLED_APPS变量中存在 django.contrib.staticfiles INSTALLED_APPS = ( 'django.contrib.admin', 'django.contrib.auth',

  • vue 音乐App QQ音乐搜索列表最新接口跨域设置方法

    在 webpack.dev.config.js中 'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path = require('path') const baseWebpackConfig = require('./web

  • Android根据不同身份配置APP对应的不同模块方法

    项目需求为APP的使用单位有很多部门,各个部分的业务也是独立的,所以开发的APP中如果把所有的模块都显示出来然后再做权限分配,会显得屏幕全是各个模块,而使用的人员只使用其中一到两个,这样给使用者带来了不便,那么如何能根据不同业务部门不同身份的人登录APP后,显示对应身份所能看到的模块就变成本次要解决的问题了. 解决思路:APP的主页用gridview来动态加载模块,然后通过list给gridview进行适配,最后在屏幕上显示出来: 但是问题来了,如何保证点击对应模块就进入相对应的模块内,例如张三

随机推荐