uniapp吸顶怎么判断导航栏

原创

已于 2022-10-17 22:00:22 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2022-10-17 21:21:26 首次发布

在uni-app开发中，为了实现不同手机的兼容性，需要处理头部导航栏的吸顶效果。首先，通过在pages.json设置"app-plus":{"titleNView":false}移除官方导航栏。接着，利用uni-app的系统信息API获取手机型号和状态栏高度。通过定义变量存储状态栏高度，使用三元表达式判断并应用定位实现吸顶效果。附带了吸顶效果的页面和方法代码。

现在大家的手机各式各样，这么一说，对开发人员也是一个问题，既要兼容这个手机，既要兼容那个手机。那么我们在开发APP的时候，怎么做到让每个手机都兼容呢？

1.我们先把原有的头部导航栏给干掉

{
		    "path" : "pages/mine/mine",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "是的犯得上广泛但是",
				"navigationBarTextStyle": "black",
		        "enablePullDownRefresh": false,
				"navigationStyle":"custom",
				"app-plus": {
					"titleNView": false
				}
		    }
		}

点击pages.json里面，在想要进行吸顶的页面的style里面加上"app-plus":{"titleNView":false}使官方提供的头部导航栏清除

2.我们每个人手机的状态栏都不一样，那后续该咋弄呢？那就是获取手机型号，进而获取状态栏。从而进行下一步代码的开发