引用插件: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