提交 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>
<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">
<text :style="{ color: textColor }" class="uni-icons">{{
unicode
......@@ -35,6 +36,10 @@
type: String,
default: "#000",
},
statusBar: {
type: Boolean,
default: false,
}
},
data() {
return {
......@@ -42,9 +47,6 @@
};
},
computed: {
navbarStyle() : string {
return `margin-top:${this.statusBarHeight}px`;
},
unicode() : string {
return "\ue600";
},
......@@ -59,9 +61,6 @@
console.log(err);
},
});
const sys = uni.getSystemInfoSync();
const statusBarHeight = sys.statusBarHeight;
this.statusBarHeight = statusBarHeight;
},
mounted() {
uni.setNavigationBarColor({
......@@ -85,6 +84,9 @@
color: #333;
}
.status-bar {
height: var(--status-bar-height);
}
.uni-navbar {
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>
<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">
<text>点击此处,将标题切换为{{isLeft?'居中':'左侧'}}显示</text>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册