关于uni-app开发的微信小程序顶部导航条机型适配
2024-10-11 11:14:17
背景:
小程序顶部导航栏那里的样式和功能都是小程序自带的,当我们在pages.json里的pages里新加一条页面配置时,会自动生成一个带顶部导航栏的空白页面,当然也可以再配置里"navigationBarTitleText","navigationBarTextStyle","navigationBarBackgroundColor",来改变导航栏标题字体,标题字体颜色,导航栏背景颜色,其实上面那些配置一般的应用场景下够用了, 但是有时候产品就偏偏不想用他的默认样式, 想在那里放张背景图, 放个输入框, 放个按钮啥的,这时候就需要自定义导航条了
实现:
pages.json里配置navigationStyle为custom
{
"path": "pages/index/index",
"pageOrientation": "landscape",
"style": {
"navigationStyle":"custom",
}
},- 如上配置好后即可实现自定义导航栏,不过直接写的话会有机型样式的差异, 如iPhoneX等机型的刘海屏会遮住部分内容,处理办法是获取导航栏信息,根据小程序右上角的胶囊定位, 代码如下
onLaunch: function() {// 获取系统信息
const systemInfo = uni.getSystemInfoSync();
// 获取胶囊按钮的位置
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// 导航栏高度 = 状态栏到胶囊的间距( 胶囊距上距离 - 状态栏高度 )*2 + 胶囊高度 + 状态栏高度
this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo
.height + systemInfo.statusBarHeight;
this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
this.globalData.menuHeight = menuButtonInfo.height;},
globalData: {
navBarHeight: </span>0, <span style="color: #008000;">//</span><span style="color: #008000;"> 导航栏高度</span>
menuRight: 0, <span style="color: #008000;">//</span><span style="color: #008000;"> 胶囊距右方间距(方保持左、右间距一致)</span>
menuBotton: 0, <span style="color: #008000;">//</span><span style="color: #008000;"> 胶囊距底部间距(保持底部间距一致)</span>
menuHeight: 0, <span style="color: #008000;">//</span><span style="color: #008000;"> 胶囊高度(自定义内容可与胶囊高度保证一致)</span>
},</pre>
这样就获取到了所需信息并存到了globalData全局变量里
在页面或组件里用到这些信息
export default {
data() {
return {
// 机型顶部适配
navBarHeight: getApp().globalData.navBarHeight,
menuRight: getApp().globalData.menuRight,
menuBotton: getApp().globalData.menuBotton,
menuHeight: getApp().globalData.menuHeight, }}</span><span style="color: #000000;">
}</span></pre>
思路如上, 部分样式代码没贴上去自行添加即可
最新文章
- C#文件帮助类FoderHelper
- 命令行导入mysql数据
- 2016.6.17 kali Linux 隧道工具
- linux free命令中buffer与cache的区别
- iphone开发第一个UI应用程序QQ
- Android开发之AlertDialog
- 使用jQuery操作元素的属性与样式
- Hibernate缓存、组件、继承映射
- C++技术问题总结-第11篇 网络通信中主机序网络序
- Python基础(十一)-面向对象
- 四:java调接口实现发送手机短信验证码功能
- ajax常见的面试题
- 周强 201771010141《面对对象程序设计(java)》第十周学习总结
- Compiling R-3.4.3 on CentOS 6.10 with GNU
- __iter__ 和 __next__
- 精读JavaScript模式(三),new一个构造函数居然发生了什么?
- python之常用模块篇5
- CSS-3 圆角Border-radius 的使用
- MVC生成图片验证码,可指定位数
- PHP之mb_strstr使用