uniapp 自定义顶部

我在uniapp中是将顶部作为组件引入到页面中

1. 首先在page.json中将顶部设为透明

{"path": "pages/index/index","style": {"navigationStyle":"custom"}}

2. 在index.vue中引入

import titleBar from '@/common/components/titleBar.vue';
components: {
	titleBar
},

3. 在index.vue中使用 <titleBar :barBgColor="'#EC4935'" :barTitle="'首页'"/>

4. 自定义头部

//html
<view class="common_top_bar">
    //顶部距离
    <view class="common_status_bar" :style="{height:statusBarHt+'px',backgroundColor: barBgColor}"> </view>
    //中间高度 右侧距离
    <view class="common_title_bar" :style="{backgroundColor:barBgColor,height:titleBarHt+'px',paddingRight:edgewt + 'px',paddingLeft:edgewt + 'px'}">
        //标题
        <view v-if="barTitle" class="common_page_title">{{barTitle}}</view>
    </view>
</view>
//js
//引入传入的值
props: {
    barTitle: {
        type: String,
	value: ""
    },
    barBgColor: {
	type: String,
	value: ""
    }
}
data() {
    return {
	statusBarHt: 0,
	titleBarHt: 0,
	edgewt: 0,
	jnWt: 0
    }
},
created() {
    this.initHtFun();
},
methods: {
    // 获取高度
    initHtFun() {
	let info = {} // 设备信息
        let jnInfo = uni.getMenuButtonBoundingClientRect() // 胶囊信息
	uni.getSystemInfo({
		success(res) {
                    info = res
                }
	})
	let sHt = info.statusBarHeight //状态栏高度
	let jnAndTleHt = jnInfo.top - sHt //状态栏顶部到胶囊的高度
	let jnHt = jnInfo.height //胶囊高度
	let tleBarHt = jnHt + jnAndTleHt * 2 //标题栏高度
	let edgewt = info.windowWidth - jnInfo.right //胶囊到右边的距离
	let jnWt = jnInfo.width
	this.statusBarHt = sHt;
	this.titleBarHt = tleBarHt;
	this.edgewt = edgewt;
	this.jnWt = jnWt;
    }
}