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