热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

uniapp如何给搜索框设值_uniapp导航栏和状态栏配置

1.导航栏原生导航优点①原生导航的体验更好,渲染新页面时,原生导航栏的渲染无需等待新页面dom加载,可以在新页面进入动画开始时就渲染。②原

1. 导航栏

原生导航优点

① 原生导航的体验更好,渲染新页面时,原生导航栏的渲染无需等待新页面dom加载,可以在新页面进入动画开始时就渲染。

② 原生导航还可以避免滚动条通顶,并方便的控制原生下拉刷新。通过pages.json的配置,可以简单的、跨端的、高性能的开发业务。

原生导航缺点:原生导航栏的扩展能力有限的。尤其是微信下,没有提供太多导航栏的配置。

1.1 原生导航栏—通用配置

uni-app 自带原生导航栏,在pages.json里配置。参考官网uni-app导航栏开发指南。

(1) 全局导航栏样式设置: 在pages.json的globalStyle里进行各个参数配置

"globalStyle": {

"navigationBarTextStyle": "black",

"navigationBarTitleText": "Hello uniapp",

"navigationBarBackgroundColor": "#F8F8F8",

"backgroundColor": "#F8F8F8",

"backgroundColorTop": "#F4F5F6",

"backgroundColorBottom": "#F4F5F6",

"mp-alipay": {

"titleBarColor": "#FFFFFF"

}

},

(2) 单页面导航栏样式设置:在每个page下面的style配置中添加navigationBar**节点来配置各个参数(通用配置,小程序、app、h5均生效)。参考style设置每个页面的状态栏、导航条、标题、窗口背景色等

{

"path": "pages/index/index",

"style": {

"navigationBarTitleText": "主页",

}

},

备注:单页面style中配置项会覆盖 globalStyle 中相同的配置项。

1.2 全局取消原生导航栏

备注:一般App里不会使用这个参数配置,建议个别页面单独设置不使用原生导航。

方法:在pages.json的globalStyle里有个navigationStyle设置,默认是default,即带有原生导航栏;将navigationStyle设为custom后,所有页面都没有原生导航。

"globalStyle": {

"navigationStyle": "custom",

},

注意:但在微信小程序里,右上角始终都有一个胶囊按钮。很多微信小游戏界面上也没原生导航栏,但有胶囊按钮。

1.3 单页面去除原生导航栏

(1) 方法1:自微信客户端 7.0.0 起、App端HBuilderX 2.0.3起,可采用将navigationStyle 设为 custom 的方法去除单个页面的原生导航栏(但小程序右上角胶囊按钮仍然去不掉)。

{

"path" : "pages/index/index",

"style" : {

"navigationStyle":"custom"

}

}

(2) 方法2:除了上述方法,也可在app-plus节点下设置titleView为false的方法来去除系统原生导航(在App去除原生导航栏后,小程序端侧仍保有原生导航栏)。

原生导航栏在App侧的扩展

微信小程序的设计里,没有给原生导航提供太多自定义能力,在开发App时是不够用的。

在App下,每个page下面的style下面还有一个子扩展节点:app-plus(这个节点定义了在5+App环境下,也即iOS、Android环境下,增强的配置)。app-plus下可以设置titleNView等更多参数,可以得到比微信小程序更丰富的扩展性。另外,开发者也可以在必要时取消原生导航栏,使用view自行绘制导航栏。

{

"path": "pages/index/index",

"style": {

"navigationBarTitleText": "主页",

// "navigationStyle":"custom",

"app-plus":{

"titleView":false //不启用系统导航

}

}

}

问题:HBuilderX创建的应用默认使用沉浸式状态栏样式,去除导航栏后,页面顶部会直通到状态栏的区域。

1.4 解决去除导航栏后,页面顶部直通状态栏区域的问题。

(1) 最简单的解决方式就是配置mainfest.json来关闭沉浸式。即通过打开应用的manifest.json文件,切换到代码视图,在app-plus -> statusbar 下添加immersed节点并设为false。

"app-plus" : {

"statusbar": {

"immersed": false

},

}

(2) 其次可通过顶部状态栏占位的方式来解决页面顶部直通状态栏区域的问题。

当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,同时需使用plus.navigator.getStatusbarHeight()来动态计算系统状态栏的高度barHeight,然后设置页面主view的样式:style="{'margin-top':barHeight+'px'}",来避免页面内容出现在状态栏。

扫码

统计

退出

var _self;

export default {

components: {

uniPopup,

},

data() {

return {

barHeight:25,

}

},

methods: {

//获取系统状态栏高度

getSystemStatusBarHeight:function(){

// #ifdef APP-PLUS

var height = plus.navigator.getStatusbarHeight();

_self.barHeight = height;

// #endif

// #ifdef H5

_self.barHeight = 0;

// #endif

},

},

onLoad:function(){

_self = this;

_self.getSystemStatusBarHeight();

}

}

备注:此种方式经测试,有时页面打开后页面主视图和状态栏区域会留白(留白的高度其实是状态栏高度)。

留白.png

(3) 若对状态栏没有要求,可直接隐藏状态栏,参考下文隐藏状态栏的方法。

1.5 其他拓展功能样式

(1) 可参考Hello-UniApp的自定义导航栏示例

新建hello uni-app项目.png

自定义导航栏示例.png

(2) 也可参考ColorUI的自定义导航示例

ColorUI-UniApp.png

2. 状态栏

2.1 改变状态栏样式—改变状态栏文字颜色

① 方案一(起效):设置该页面或全局的 navigationBarTextStyle 属性,可取值为 black/white。

{

"path" : "pages/tabBar/user/user",

"style" : {

"app-plus":{

"titleNView":false //不启用系统导航

},

"navigationBarTextStyle":"white"//设置页面导航和状态栏文字颜色

}

}

"globalStyle": {

"navigationBarTextStyle": "white",//全局设置导航和状态栏文字颜色

"navigationBarTitleText": "杰克缝纫机",

"navigationBarBackgroundColor": "#00a9e2",

"backgroundColor": "#FFFFFF"

},

② 方案二(未起效):如果想单独设置颜色,App端可使用plus.navigator.setStatusBarStyle设置,可取值为 dark/light。部分低端Android手机(如Android4.4)自身不支持设置状态栏前景色。

// #ifdef APP-PLUS

//可取值: "dark":深色前景色样式(即状态栏前景文字为黑色),此时background建议设置为浅颜色; "light":浅色前景色样式(即状态栏前景文字为白色),此时background建设设置为深颜色;

plus.setStatusBarStyle("light");

// #endif

2.2 改变状态栏样式—改变状态栏背景颜色

通过绘制一个占位的view固定放在状态栏位置,设置此view的背景颜色,即可达到想要的效果,uni-app提供了一个状态栏高度的css变量,具体参考uni-app内置的CSS变量。

export default {

data() {

return {

}

},

methods: {

}

}

.status_bar {

height: var(--status-bar-height);

width: 100%;

background-color: #F8F8F8;

}

.top_view {

height: var(--status-bar-height);

width: 100%;

position: fixed;

background-color: #F8F8F8;

top: 0;

z-index: 999;

}

var(--status-bar-height) :此变量在微信小程序环境为固定 25px,在 5+App 里为手机实际状态栏高度。

2.3 隐藏状态栏

(1) 单个页面隐藏

页面onLoad() 函数中添加

// #ifdef APP-PLUS

plus.navigator.setFullscreen(true);

// #endif

页面onUnload() 函数中添加

// #ifdef APP-PLUS

plus.navigator.setFullscreen(false);

// #endif

备注:若在页面unLoad() 时未调用plus.navigator.setFullscreen(false);,将导致退出当前页面后其他所有页面的状态栏也都被隐藏了。

(2) 整个应用隐藏

App.vue中 onLaunch() 函数中添加

// #ifdef APP-PLUS

plus.navigator.setFullscreen(true);//隐藏状态栏(应用全屏:只能隐藏状态栏,标题栏和虚拟返回键都还可以显示)

// #endif



推荐阅读
  • 在将 Android Studio 从 3.0 升级到 3.1 版本后,遇到项目无法正常编译的问题,具体错误信息为:org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':app:processDemoProductDebugResources'。 ... [详细]
  • 本文详细介绍了如何使用C#实现不同类型的系统服务账户(如Windows服务、计划任务和IIS应用池)的密码重置方法。 ... [详细]
  • 在Android中实现黑客帝国风格的数字雨效果
    本文将详细介绍如何在Android平台上利用自定义View实现类似《黑客帝国》中的数字雨效果。通过实例代码,我们将探讨如何设置文字颜色、大小,以及如何控制数字下落的速度和间隔。 ... [详细]
  • 尽管在WPF中工作了一段时间,但在菜单控件的样式设置上遇到了一些基础问题,特别是关于如何正确配置前景色和背景色。 ... [详细]
  • Zabbix自定义监控与邮件告警配置实践
    本文详细介绍了如何在Zabbix中添加自定义监控项目,配置邮件告警功能,并解决测试告警时遇到的邮件不发送问题。 ... [详细]
  • Maven + Spring + MyBatis + MySQL 环境搭建与实例解析
    本文详细介绍如何使用MySQL数据库进行环境搭建,包括创建数据库表并插入示例数据。随后,逐步指导如何配置Maven项目,整合Spring框架与MyBatis,实现高效的数据访问。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 本文详细介绍了 `org.apache.tinkerpop.gremlin.structure.VertexProperty` 类中的 `key()` 方法,并提供了多个实际应用的代码示例。通过这些示例,读者可以更好地理解该方法在图数据库操作中的具体用途。 ... [详细]
  • Beetl是一款先进的Java模板引擎,以其丰富的功能、直观的语法、卓越的性能和易于维护的特点著称。它不仅适用于高响应需求的大型网站,也适合功能复杂的CMS管理系统,提供了一种全新的模板开发体验。 ... [详细]
  • 本文详细介绍了JQuery Mobile框架中特有的事件和方法,帮助开发者更好地理解和应用这些特性,提升移动Web开发的效率。 ... [详细]
  • 问题场景用Java进行web开发过程当中,当遇到很多很多个字段的实体时,最苦恼的莫过于编辑字段的查看和修改界面,发现2个页面存在很多重复信息,能不能写一遍?有没有轮子用都不如自己造。解决方式笔者根据自 ... [详细]
  • spring boot使用jetty无法启动 ... [详细]
  • Web动态服务器Python基本实现
    Web动态服务器Python基本实现 ... [详细]
  • 本文详细介绍了在 Ubuntu 16.04 系统上安装和配置 PostgreSQL 数据库的方法,包括如何设置监听地址、启用密码加密、更改默认用户密码以及调整客户端访问控制。 ... [详细]
  • 探讨了一个包含纯虚函数的C++代码片段,分析了其中的语法错误及逻辑问题,并提出了修正方案。 ... [详细]
author-avatar
bakurei_492
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有