uni-app自定義導航欄問題

引用插件：uniNavBar

<uni-nav-bar statusBar="true" backgroundColor="#59AAFE" color="#FFFFFF" class="status-bar">
			<view slot="left">分類</view>
			<view>課程</view>
			<view slot="right"></view>
		</uni-nav-bar>

　　

存在問題：

1. 給插件標簽上定義css改變前、背景色是不行的。需要使用backgroundColor，color屬性。

2. 非具名插槽，默認中間顯示的文字，不居中，可以用flex布局，讓左中右三個插槽平分，並讓text劇中

3. 關於uni-nav-bar的height問題，從源碼中看，他先定義了一個$nav-height: 44px;變量。

然后，如果定義statusBar=true，則又加入一個占位的組件

<uni-status-bar v-if="statusBar" />

　跟蹤這個組件的源碼，發現里面放了一個空的view，高度為系統statusBarHeight，又寫死了一個樣式，高度是20px，style屬於element級別，應該高於類吧。所以這個高度應該就是20px了。

<template>
	<view :style="{ height: statusBarHeight }" class="uni-status-bar">
		<slot />
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		name: 'UniStatusBar',
		data() {
			return {
				statusBarHeight: statusBarHeight
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-status-bar {
		width: 750rpx;
		height: 20px;
		// height: var(--status-bar-height);
	}
</style>

　

那問題就來了，如果下面再放一個fix的組件，怎么把這個高度減去呢?44+20=64px。

我這里引用了一個mescroll的插件。

<mescroll-uni 
			class="jp-course-list" 
			ref="mescrollRef" 
			@init="mescrollInit" 
			@down="downCallback" 
			@up="upCallback" 
			:down="downOption" 
			:up="upOption"
			:topbar="true"
			:top="74"
		>

　　

在真機和小程序下測試通過

　

 

===================================================================================

20200601

mescroll-body已經不是浮動的了，直接塊級元素排列，不需要再計算偏移量了，改用mescroll-body