03 uniapp自定义导航栏的开发
在我眼里自定义导航分2类: 原生基础上 || 非原生基础上
总结:项目当中能原生就原生,提高性能
区别
uni-app 自带原生导航栏,在pages.json里配置。
原生导航的体验更好,渲染新页面时,原生导航栏的渲染无需等待新页面dom加载,可以在新页面进入动画开始时就渲染。
原生导航还可以避免滚动条通顶,并方便的控制原生下拉刷新。
通过pages.json的配置,可以简单的、跨端的、高性能的开发业务。
但原生导航栏的扩展能力有限的。尤其是微信下,没有提供太多导航栏的配置。
在App下,pages.json里每个页面的app-plus下可以设置titleNView等更多参数,可以得到比微信小程序更丰富的扩展性。
另外,开发者也可以在必要时取消原生导航栏,使用view自行绘制导航栏。
原生基础上
- 通过app-plus属性对自定义导航扩展
https://uniapp.dcloud.io/collocation/pages?id=app-plus
文档描述:
1.原生导航能解决业务需求的情况下,尽量使用原生导航,甚至有时需要牺牲一些不是很重要的需求。
2.在App和H5下,uni-app提供了灵活的处理方案:`titleNView、subNVue`、或整页使用nvue。
3.但在小程序下,因为其自身的限制,没有太好的方案。有必要的话,也可以用条件编译分端处理。
所以主要是使用app-plus的titleNView(导航栏)、subNVue(子窗口)属性
- titleNView(导航栏) 以下都是在titleNView属性下操作
https://uniapp.dcloud.io/collocation/pages?id=app-titlenview
常用的是按钮属性:https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-buttons
titleNView.buttons.type
除了type文档还有其它属性
"buttons": [{"type": "menu"},{"type": "favorite"}]
其它类型
"forward":前进按钮 "back":后退按钮
"share":分享按钮 "favorite":收藏按钮
"home":主页按钮 "menu":菜单按钮
"close":关闭按钮 "none":无样式,不显示图标
自定义返回按钮
titleNView.backButton
用法跟button一样,但需需要在autoBackButton设置为true时生效
https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-backbuttonstyles
titleNView.<其它属性>
https://uniapp.dcloud.io/collocation/pages?id=app-titlenview
出了按钮跟返回按钮 还有其它属性比如
searchInput 原生导航栏上的搜索框配置
homeButton 标题栏控件是否显示Home按钮
backgroundImage 背景图片路径 等等
这些按钮的生命周期
//其中事件参数e.index值为点击按钮在buttons数组的索引值,从0开始
onNavigationBarButtonTap(e) 该生命周期监听按钮的点击事件
//设有搜索框时搜索框的生命周期
onNavigationBarSearchInputChanged()//搜索框内容变化
onNavigationBarSearchInputConfirmed()//搜索事件也是手机的回车事件
更改这些按钮的方法
webView对象文档及其它方法https://www.html5plus.org/doc/zh_cn/webview.html#
搜索WebviewObject关键字第47个处
// #ifdef APP-PLUS
var webView = this.$mp.page.$getAppWebview(); //必须先获取webview对象
webview.showTitleNViewButtonRedDot()//调用方法显示红点
webview.showTitleNViewButtonRedDot()//调用方法隐藏红点
webview.setTitleNViewButtonBadge()//修改红点角标
webview.setTitleNViewButtonStyle()//修改按钮
// #endif
这些是原生基础上app-plus的titleNView(导航栏),还有个subNVue(子窗口)属性
- subNVue(子窗口)属性 以下都是在subNVue(子窗口)属性下操作
配置
subNVue.style
https://uniapp.dcloud.io/collocation/pages?id=app-subnvuesstyle
subNVue是 vue 页面的子窗体,它不是全屏页面,就是用于解决 vue 页面中的层级覆盖和原生界面自定义用的。它也不是组件,就是一个原生子窗体
nvue快速上手
https://uniapp.dcloud.io/nvue-outline?id=_1%e6%96%b0%e5%bb%banvue%e9%a1%b5%e9%9d%a2
方法
const subNVue = uni.getSubNVueById('原生子窗体的 ID');获取子窗口对象
用于开发弹窗与导航
subNVue对象的方法
https://uniapp.dcloud.io/api/window/subNVues?id=app-getsubnvuebyid
nvue 跟 vue 的通讯
https://ask.dcloud.net.cn/article/36010
非原生基础上
全局取消原生导航栏"navigationStyle":"custom"
- 1.取消原生导航栏
"navigationStyle":"custom"
带来的问题:有些新组件已经解决了这个问题. 状态栏(显示电量的那一栏,不是导航栏),导航栏直接陷进去了.
- 2.处理状态栏问题
App因为默认为沉浸式,去除导航栏后,页面顶部会直通到状态栏的区域
uni-app 提供内置 CSS 变量解决
https://uniapp.dcloud.io/frame?id=css变量
写成代码后直接解决了我这个问题
<!-- #ifdef APP-PLUS -->
<view class="status_bar">
<view class="top_view"></view>
</view>
<!-- #endif -->
/*
* !!!然后在这下面放自己的导航组件就行
* https://ext.dcloud.net.cn/plugin?id=52(这个我感觉就可以了)
*/
//css部分
.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;
}
- 3.H5、小程序、App端状态栏都不一样,需要重新计算处理,下面是别人处理好的代码
直接使用,在App.vue里面设置即可
onLaunch: function() {
uni.getSystemInfo({
success:function(e){
Vue.prototype.statusBar = e.statusBarHeight
// #ifndef MP
if(e.platform == 'android') {
Vue.prototype.customBar = e.statusBarHeight + 50
}else {
Vue.prototype.customBar = e.statusBarHeight + 45
}
// #endif
// #ifdef MP-WEIXIN
let custom = wx.getMenuButtonBoundingClientRect()
Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
// #endif
// #ifdef MP-ALIPAY
Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
// #endif
}
})
},
禁用原生导航后 还是可以通过接口改变样式的
https://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.setStatusBarStyle
页面禁用原生导航栏后,仍可设置页面的 navigationBarTextStyle 属性
注意部分低端Android手机(4.4)自身不支持设置状态栏前景色。
03 uniapp自定义导航栏的开发的更多相关文章
- uni-app自定义导航栏按钮|uniapp仿微信顶部导航条
最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在 ...
- iOS 自定义导航栏笔记
一.UINavigationBar的结构 导航栏几乎是每个页面都会碰到的问题,一般两种处理方式:1.隐藏掉不显示 2.自定义 1. 添加导航栏 TestViewController * mainVC ...
- 解决 ios7.0 以后自定义导航栏左边按钮靠右的问题
解决 ios7.0 以后自定义导航栏左边按钮靠右的问题 www.111cn.net 编辑:edit02_lz 来源:转载 最近开发了一个ios的app,在ios7.0+出现自定义导航栏左边按钮出现靠右 ...
- Taro 小程序 自定义导航栏
在小程序中,有的页面需求可能需要我们做一个自定义的导航栏, 今天就来踩一踩坑 首先需要在app.js 中给全局的导航栏隐藏, // app.js window: { navigationStyle: ...
- Taro多端自定义导航栏Navbar+Tabbar实例
运用Taro实现多端导航栏/tabbar实例 (H5 + 小程序 + React Native) 最近一直在捣鼓taro开发,虽说官网介绍支持编译到多端,但是网上大多数实例都是H5.小程序,很少有支持 ...
- 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中 页面的 title 只支持纯文本级别的样式控 ...
- React Native自定义导航栏
之前我们学习了可触摸组件和页面导航的使用的使用: 从零学React Native之09可触摸组件 - 从零学React Native之03页面导航 - 经过之前的学习, 我们可以完成一个自定义导航栏了 ...
- iOS个人中心渐变动画、微信对话框、标签选择器、自定义导航栏、短信验证输入框等源码
iOS精选源码 简单的个人中心页面-自定义导航栏并予以渐变动画 程序员取悦女票的正确姿势---Tip1(iOS美容篇) iOS 前台重启应用和清除角标的问题 微信原生提醒对话框3.0 JHLikeBu ...
- 微信小程序自定义导航栏组件
1.首先,要在json文件中设置为自定义的形式 "navigationStyle": "custom" 2.计算相关值 导航栏分为状态栏和标题栏,只要能算出每台 ...
随机推荐
- c++:-1
C++第一部分介绍基础:c++:-0,本节介绍C++中函数使用. 函数 函数调用 调用函数需要先声明函数原型 嵌套调用: 参数传递 在函数被调用时才分配形参的存储单元 实参可以是常量.变量或表达式 实 ...
- 手机USB共享网络是个啥
智能手机一般都提供了USB共享网络的功能,将手机通过USB线与电脑连接,手机端开启『USB共享网络』,电脑就能通过手机上网. 手机端开启『USB共享网络』: 电脑端出现新的网络连接: 通过设备管理器看 ...
- Spring Ioc源码分析系列--Ioc源码入口分析
Spring Ioc源码分析系列--Ioc源码入口分析 本系列文章代码基于Spring Framework 5.2.x 前言 上一篇文章Spring Ioc源码分析系列--Ioc的基础知识准备介绍了I ...
- 解读先电2.4版 iaas-install-mysql.sh 脚本
#!/bin/bash #声明解释器路径 source /etc/xiandian/openrc.sh #生效环境变量 ping $HOST_IP -c 4 >> /dev/null 2& ...
- 这 BUG,绝了
上周只上了三天班,但我也丝毫不敢懈怠,BUG 更是一个也没少写. 看着满屏幕的 ERROR,我陷入沉思.为什么我写的代如此烂,无法像大牛们写的那般优雅? 越想越自卑,越想越抑郁.我觉得这样不行,一定得 ...
- docker使用详解
一.docker简介 docker 是一个开源的应用容器引擎,docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化 ...
- springMvc和Hibernate集成实现用户添加
源码:http://pan.baidu.com/s/1i4xVLE9(百度云) 步骤:一.创建数据库(mysql) 二.导入相应jar包(注意不同数据库jdbc.jar包)配置web.xml.spri ...
- 好客租房22-react组件的两种创建方式(类组件)
2.2使用类创建组件 类组件:使用ES6的class创建的组件 约定1:类组件必须以大写字母开头 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 约定3:组件必 ...
- 源码解读etcd heartbeat,election timeout之间的拉锯
转一个我在知乎上回答的有关raft election timeout/ heartbeat interval 的回答吧. 答:准确来讲: election是timeout,而heartbeat 是in ...
- [BJOI2014]想法
参考 P4581传送门 题意:给DAG,问每个点可以由多少个叶子到达. 思路: 随机化!!(题面有提示) 这道题利用在一个范围内随机的数期望均分范围的性质. 直接每个叶子在\([0,Max\_Rand ...