提交 9c25171c 编写于 作者: M mehaotian

fix: 修改navbar-lite组件导航栏高度为css变量,删除uni.getSystemInfoSync()

上级 14cffd74
@font-face {
font-family: "UniIconsLight";
src: url('./uniicons.ttf') format('truetype');
}
.uni-icons {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
}
.uniui-back:before {
content: "\e600";
}
<template> <template>
<view class="uni-navbar"> <view class="uni-navbar">
<view class="uni-navbar-inner" :style="navbarStyle"> <view v-if="statusBar" class="status-bar"></view>
<view class="uni-navbar-inner">
<view class="left-content" @click="back"> <view class="left-content" @click="back">
<text :style="{ color: textColor }" class="uni-icons">{{ <text :style="{ color: textColor }" class="uni-icons">{{
unicode unicode
...@@ -34,7 +35,11 @@ ...@@ -34,7 +35,11 @@
textColor: { textColor: {
type: String, type: String,
default: "#000", default: "#000",
}, },
statusBar: {
type: Boolean,
default: false,
}
}, },
data() { data() {
return { return {
...@@ -42,9 +47,6 @@ ...@@ -42,9 +47,6 @@
}; };
}, },
computed: { computed: {
navbarStyle() : string {
return `margin-top:${this.statusBarHeight}px`;
},
unicode() : string { unicode() : string {
return "\ue600"; return "\ue600";
}, },
...@@ -59,9 +61,6 @@ ...@@ -59,9 +61,6 @@
console.log(err); console.log(err);
}, },
}); });
const sys = uni.getSystemInfoSync();
const statusBarHeight = sys.statusBarHeight;
this.statusBarHeight = statusBarHeight;
}, },
mounted() { mounted() {
uni.setNavigationBarColor({ uni.setNavigationBarColor({
...@@ -84,7 +83,10 @@ ...@@ -84,7 +83,10 @@
font-style: normal; font-style: normal;
color: #333; color: #333;
} }
.status-bar {
height: var(--status-bar-height);
}
.uni-navbar { .uni-navbar {
background-color: #007aff; background-color: #007aff;
} }
......
<template>
<view class="uni-navbar">
<view class="uni-navbar-inner" :style="navbarStyle">
<view class="left-content" @click="back">
<text class="uni-icons uniui-back"></text>
</view>
<view class="uni-navbar-content">
<slot>{{title}}</slot>
</view>
<view class="right-content">
<slot name="right"></slot>
</view>
</view>
</view>
</template>
<script>
export default {
name: "uni-navbar",
props: {
title: {
type: String,
default: ''
}
},
data() {
return {
statusBarHeight: 0
};
},
computed: {
navbarStyle() {
return `margin-top:${this.statusBarHeight}px`
},
},
created() {
const sys = uni.getSystemInfoSync()
const statusBarHeight = sys.statusBarHeight
this.statusBarHeight = statusBarHeight
},
methods: {
back() {
uni.navigateBack({})
}
},
}
</script>
<style>
@import './uni-icons.css';
.uni-icons {
font-family: UniIconsLight;
text-decoration: none;
text-align: center;
font-size: 22px;
font-style: normal;
color: #333;
}
.uni-navbar {
border: 1px #eee solid;
background-color: #fff;
}
.uni-navbar-inner {
position: relative;
flex-direction: row;
justify-content: space-between;
height: 45px;
}
.left-content,
.right-content {
justify-content: center;
align-items: center;
width: 45px;
height: 100%;
}
.uni-navbar-content {
position: absolute;
height: 100%;
top: 0;
bottom: 0;
left: 45px;
right: 45px;
justify-content: center;
align-items: center;
}
</style>
<template> <template>
<view class="content"> <view class="content">
<uni-navbar-lite :title="title" :is-left="isLeft" :text-color="navigationBarTextColor"></uni-navbar-lite> <uni-navbar-lite :status-bar="true" :title="title" :is-left="isLeft" :text-color="navigationBarTextColor"></uni-navbar-lite>
<view class="content-item" @click="onClick"> <view class="content-item" @click="onClick">
<text>点击此处,将标题切换为{{isLeft?'居中':'左侧'}}显示</text> <text>点击此处,将标题切换为{{isLeft?'居中':'左侧'}}显示</text>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册