pages.json 文件:自定义导航栏
自定义导航栏使用注意
当navigationStyle设为custom或titleNView设为false时,原生导航栏不显示,此时要注意几个问题:
- 非H5端,手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因,即全屏可写内容。uni-app提供了状态栏高度的css变量--status-bar-height,如果需要把状态栏的位置从前景部分让出来,可写一个占位div,高度设为css变量。
<template>
<view>
<view class="status_bar">
<!-- 这里是状态栏 -->
</view>
<view> 状态栏下的文字 </view>
</view>
</template>
<style>
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
</style>
复制代码
- 如果原生导航栏不能满足需求,推荐使用uni ui的自定义导航栏NavBar。这个前端导航栏自动处理了状态栏高度占位问题。
- 前端导航栏搭配原生下拉刷新时,会有问题,包括
- 微信小程序下iOS需要拉更长才能看到下拉刷新的三个点,而Android是从屏幕顶部下拉,无法从导航栏下方下拉。如果一定要从前端导航栏下拉,小程序下只能放弃原生下拉刷新,纯前端模拟,参考mescroll插件,但这样很容易产生性能问题。目前小程序平台自身没有提供更好的方案
- App和H5下,原生下拉刷新提供了circle样式,可以指定offset偏移量(pages.json的app-plus下配置),自定义下拉圈出现的位置。在hello uni-app的扩展组件中有示例。
- 非H5端,前端导航盖不住原生组件。如果页面有video、map、textarea(仅小程序)等原生组件,滚动时会覆盖住导航栏
- 如果是小程序下,可以使用cover-view来做导航栏,避免覆盖问题
- 如果是App下,建议使用titleNView或subNVue,体验更好
- 前端组件在渲染速度上不如原生导航栏,原生导航可以在动画期间渲染,保证动画期间不白屏,但使用前端导航栏,在新窗体进入的动画期间可能会整页白屏,越低端的手机越明显。
- 以上讨论的是前端自定义导航栏,但在App侧,原生导航栏也提供了比小程序导航更丰富的自定义性
- titleNView:给原生导航栏提供更多配置,包括自定义按钮、滚动渐变效果、搜索框等,详见titleNView
- subNVue:使用nvue原生渲染,所有布局自己开发,具备一切自定义灵活度。详见subNVue
- 页面禁用原生导航栏后,想要改变状态栏的前景字体样式,仍可设置页面的 navigationBarTextStyle 属性(只能设置为 black或white)。如果想单独设置状态栏颜色,App端可使用plus.navigator.setStatusBarStyle设置。注意部分低端Android手机(4.4)自身不支持设置状态栏前景色。
鉴于以上问题,在原生导航能解决业务需求的情况下,尽量使用原生导航。甚至有时需要牺牲一些不是很重要的需求。在App和H5下,uni-app提供了灵活的处理方案:titleNView、subNVue、或整页使用nvue。但在小程序下,因为其自身的限制,没有太好的方案。有必要的话,也可以用条件编译分端处理。
pages.json 文件:自定义导航栏的更多相关文章
- 微信小程序自定义导航栏组件
1.首先,要在json文件中设置为自定义的形式 "navigationStyle": "custom" 2.计算相关值 导航栏分为状态栏和标题栏,只要能算出每台 ...
- 微信小程序自定义导航栏
微信小程序需要自定义导航栏,特别是左上角的自定义设置,可以设置返回按钮,菜单按钮,配置如下: 1.在app.json的window属性中增加: navigationStyle:custom 顶部导航栏 ...
- 微信小程序——自定义导航栏
微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...
- Taro多端自定义导航栏Navbar+Tabbar实例
运用Taro实现多端导航栏/tabbar实例 (H5 + 小程序 + React Native) 最近一直在捣鼓taro开发,虽说官网介绍支持编译到多端,但是网上大多数实例都是H5.小程序,很少有支持 ...
- uni-app自定义导航栏按钮|uniapp仿微信顶部导航条
最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在 ...
- vue+vant-ui小程序,微信小程序自定义导航栏(适配刘海屏)
整理一下微信小程序自定义导航栏和刘海屏适配问题 1.首先在根据官方文档,我们在小程序修改 app.json 中的 window 的属性 "navigationStyle": &qu ...
- 分别用ToolBar和自定义导航栏实现沉浸式状态栏
一.ToolBar 1.在build.gradle中添加依赖,例如: compile 'com.android.support:appcompat-v7:23.4.0' 2.去掉应用的ActionBa ...
- ios7以上自定义导航栏标题的字体大小及颜色的方法
自定义导航栏的字体和颜色,只需要自定义一个lable,然后将lable添加到导航栏的titleview中就可以了 代码如下 UILabel *label = [[UILabel alloc] init ...
- iOS 自定义导航栏笔记
一.UINavigationBar的结构 导航栏几乎是每个页面都会碰到的问题,一般两种处理方式:1.隐藏掉不显示 2.自定义 1. 添加导航栏 TestViewController * mainVC ...
- 微信小程序-如何自定义导航栏(navigationStyle)?
小程序是越来越开放了,微信版本 6.6.0可以自定义导航? 先了解下app.json中window配置navigationStyle属性,即导航栏样式,仅支持 default/custom.custo ...
随机推荐
- Command Injection-命令注入(命令执行)
什么是命令注入? 命令注入是滥用应用程序的行为在操作系统上执行命令,使用与设备上的应用程序运行时相同的权限.例如,在作为名为joe的用户运行的web服务器上实现命令注入将在该joe用户下执行命令,从而 ...
- Vue前端框架的基础学习,为之后打个基础
Vue 首先,在使用vue之前,我们需要先下载好一个vue.js文件,才能继续进行vue的学习,下载教程如下: 1.进入官网:https://v2.vuejs.org/ 2.选择页面中的Learn,再 ...
- Feign报错:The bean 'xxxxx.FeignClientSpecification' could not be registered.
解决方法: spring: main: allow-bean-definition-overriding: true 参考博客:https://www.cnblogs.com/lifelikeplay ...
- [C++STL教程]7.priority_queue优先队列入门学习!零基础都能听懂的教程
不知不觉C++STL教程系列已经第7期了.之前我们介绍过:vector, queue, stack, set, map等等数据结构. 今天我们来学习一个新的stl容器:priority_queue优先 ...
- Centos7.9中使用Docker安装云崽机器人
Centos7.9中使用Docker安装云崽机器人 前面我写了如何普通版搭建云崽教程,今天我们来使用docker来安装,感谢docker镜像源作者:如青桑(QQ: 1666633887) 普通版教程: ...
- vue对象深拷贝(避免对象赋值,改变一个对象的值,另一个对象也变化)
对象直接赋值时,例如 let b = { name: 'name', age: 12} let a=b, a.age = 13 console.log(b.age) // 13 由此可见,当改变 a ...
- axios和后端交互时,参数需要写在body和query中同时写
axios.post('/api/xxx',{ // post body },{ params: { // query } }) demo: let params = { _id:this.alarm ...
- kubernetes 安装 Prometheus + Grafana
kubernetes 安装 Prometheus + Grafana kubernetes install Prometheus + Grafana 官网 Official website https ...
- [ElasticSearch]修改开源安全组件Search Guard-6 用户密码
ES有很多的安全组件可用,例如: X-pack,Sarch Guard.但目前开源免费的,仅Search Guard. 1 前置条件 Elastic Search 6 服务安装成功,且成功运行. ES ...
- python语法的入门
1.变量 1.1: 底层原理:现在内存空间申请一块地址来储存变量值, 然后把申请的内存地址跟变量名绑定在一起 之后只需通过访问变量名就可以获取变量值 1.2:一个变量名只能指向一个内存地址,但是一个内 ...