提示:uni-app使用自定义导航,获取顶部距离,兼容各个手机型号
前言
uni-app使用自定义导航,获取顶部距离,兼容各个手机型号
一、使用uni-app自带导航栏
只需在pages.json文件里面配置即可;
代码如下:
{
"path": "pages/my/Mybrand",
"style": {
"navigationBarTitleText": "品牌合作",
"app-plus": {
//只需将titleNView改为true即可,即可使用原生导航栏
"titleNView": true
}
}
},
二、使用自定义导航栏
1.使用原因?
原生导航栏往往不能满足需求,故需要使用自定义导航栏;
例如:跳转传递参数,和返回时需要写相应的逻辑,都无法满足我们的需求;
2.效果展示?
3.如何使用?
代码如下(示例):
<template>
<view class="allheaders">
//获取顶部高度
<view :style="{ height: statusBarHeight + 'px' }"></view>
<view class="details-nav">
<view class="back-info">
<image @click="goBack()" class="back-image" src="../../../static/images/index/back@2x.png" mode=""></image>
</view>
<view class="details-nav-right"> 粉丝 </view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusBarHeight: 0,
}
},
mounted() {
//必须放在mounted钩子函数最前面,不能放在调用其它方法后面,否则无效
let that = this
//获取手机系统信息
const info = uni.getSystemInfoSync()
//设置状态栏高度
that.statusBarHeight = info.statusBarHeight
that.getPersoanalInfo()
that.initSortable()
},
methods: {
},
},
}
</script>
<style scoped lang="scss">
.details-nav {
width: 100%;
height: 88rpx;
background-color: #fff;
position: relative;
z-index: 999;
.back-info {
width: 44rpx;
height: 44rpx;
position: absolute;
left: 24rpx;
top: 22rpx;
z-index: 99;
.back-image {
width: 100%;
height: 100%;
}
}
.details-nav-right {
width: 100%;
font-size: 36rpx;
font-weight: 500;
text-align: center;
line-height: 88rpx;
color: #333333;
}
}
</style>