開(kāi)發(fā)app時(shí)使用自定義導(dǎo)航欄,導(dǎo)航欄隨頁(yè)面滾動(dòng),這時(shí)需要將導(dǎo)航欄固定頭部,中間內(nèi)容滾動(dòng),這里要同時(shí)適配app和h5
<template>
<view class="safety homePage">
<!-- #ifdef APP-PLUS -->
<view class=" headerBox" :style="{paddingTop: systemBarHeight + 'px'}">
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="flex-between headerBox" :style="`paddingTop:${systemBarHeight+10}px`">
<!-- #endif -->
<!--你的header-->
</view>
<!-- 主要內(nèi)容區(qū) -->
<!-- #ifdef APP-PLUS -->
<view class="mainBox" :style="`marginTop:${systemBarHeight+24}px`">
<!-- #endif -->
<!-- #ifdef H5 -->
<!-- 加的高度是調(diào)試得來(lái)得,我也不知道這樣行不行-->
<view class="mainBox" :style="`paddingTop:${systemBarHeight+65}px`">
<!-- #endif -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
systemBarHeight: '',
}
},
created() {
this.getSysteminfo()
},
methods: {
// 獲取系統(tǒng)欄高度
getSysteminfo() {
uni.getSystemInfo({
success: res => {
this.systemBarHeight = res.statusBarHeight;
console.log(this.systemBarHeight, "this.systemBarHeight")
}
});
},
}
}
</script>
<style lang="scss" scoped>
.homePage {
.headerBox {
display: flex;
justify-content: space-between;
align-items: center;
// #ifdef APP-PLUS
padding: 30rpx;
// #endif
// #ifdef H5
padding: 30rpx;
// #endif
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 999;
background: #FFFFFF;
}
.mainBox {
padding: 0 30rpx 30rpx;
}
}
</style>
