uniapp自定义导航栏

APP中与微信小程序中使用的API不一样，下面就分别介绍一下使用方法

微信小程序

getMenuButtonBoundingClientRect()
官方解说：在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息，方便开发者布局顶部内容时避开该按钮。

APP

uni.getSystemInfo(OBJECT)
获取系统消息
可以使用下面这个变量来获取状态栏高度

使用方法

<template><view class="content"><view style="background-color: red;" :style="{height:heightOne+'px'}">1</view><view style="background-color: yellow;" :style="{height:heightTwo+'px'}">2</view><view style="background-color: blue;" :style="{height:heightThree+'px'}">3</view></view>
</template><script>export default{data(){return{heightOne:0,heightTwo:0,heightThree:0,}},onReady(){const self = this;// #ifdef MP-WEIXINself.heightOne = uni.getMenuButtonBoundingClientRect().top;//头部高度self.heightTwo = uni.getMenuButtonBoundingClientRect().height;//标题高度self.heightThree = uni.getMenuButtonBoundingClientRect().bottom;//头部加标题高度// #endif// #ifdef APP-PLUS// 异步方式uni.getSystemInfo({success: function (res) {self.heightOne = res.statusBarHeight;self.heightTwo = res.statusBarHeight;self.heightThree = res.statusBarHeight;console.log(res.safeArea)}});//同步方式// self.heightOne.uni.getSystemInfoSync().statusBarHeight// self.heightTwo.uni.getSystemInfoSync().statusBarHeight// self.heightThree.uni.getSystemInfoSync().statusBarHeight// #endif},onLoad(){},onShow() {},methods:{}}
</script>
<style></style>

IOS模拟器效果

微信小程序开发工具效果

安装真机APP效果(为了看效果，我用电脑反向拍照的)

安卓真机小程序效果(为了看效果，我用电脑反向拍照的)

uniapp自定义导航栏相关推荐

uniapp自定义导航栏，手机顶部通知栏字体颜色修改
使用uniapp自定义导航栏时,自己的导航栏字体颜色为白色但是,系统上方的通知栏部分还是黑色,文档中表明设置这个就有用,即使你的配置是"navigationStyle": &qu ...
uni-app自定义导航栏右侧做增加按钮并跳转链接
uni-app自定义导航栏右侧做增加按钮并跳转链接 uni-app 在页面上的导航栏右侧做一个增加的图标并实现跳转 1. 先看效果图 2. 实现思路使用阿里图标库的字体图标, 下载放入本地文件 p ...
uniapp自定义导航栏遮住了手机状态栏问题
#uniapp在界面自定义导航栏之后,导航栏会自动占在屏幕的状态栏重叠上解决办法首先在pages.josn是页面里面加上"navigationStyle": "cus ...
uni-app自定义导航栏
有时我们需要对导航栏进行自定义,接下来就是对uni-app进行代码的编写对于一些不是很复杂的顶部导航,当然使用原生导航栏实现是最佳选择 uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只 ...
uniapp自定义导航栏，高度，自定义组件
设置自定义导航栏 :globalStyle 内 navigationStyle": "custom" 配置页面:pages.json "globalStyle& ...
uni-app 自定义导航栏
效果图隐藏小程序底部导航栏封装组件在 components 文件夹中新建一个 tabbar.vue 文件 <template><view class="tabbar& ...
uniapp自定义导航栏的开发
在我眼里自定义导航分2类: 原生基础上 || 非原生基础上总结:项目当中能原生就原生,提高性能区别 uni-app 自带原生导航栏,在pages.json里配置. 原生导航的体验更好,渲染新页面时 ...
uniapp自定义导航栏与手机状态栏重叠问题
HBuildX 创建的应用默认是沉浸式样式,去除自带的导航栏后,页面直通手机顶部状态栏,即页面与手机状态栏重叠问题处理:配置mainfest.json来关闭沉浸式,打开应用的manifest.jso ...
uniapp自定义导航栏高度
// 获取状态栏高度 var { statusBarHeight } = uni.getSystemInfoSync();// 获取胶囊位置尺寸 var menuButtonObject = uni. ...

uniapp自定义导航栏

微信小程序

APP

使用方法

uniapp自定义导航栏相关推荐

最新文章

热门文章