diff --git a/components/uni-navbar-lite/uni-icons.css b/components/uni-navbar-lite/uni-icons.css
deleted file mode 100644
index 469ca822ee999354737cab2a7527f017bc704f1a..0000000000000000000000000000000000000000
--- a/components/uni-navbar-lite/uni-icons.css
+++ /dev/null
@@ -1,15 +0,0 @@
-@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";
-}
-
diff --git a/components/uni-navbar-lite/uni-navbar-lite.uvue b/components/uni-navbar-lite/uni-navbar-lite.uvue
index 0557dc07385a608d3e2630fe09aef0117e1a94fe..e9d0db33c564b5798d6be9882392f73129da82ef 100644
--- a/components/uni-navbar-lite/uni-navbar-lite.uvue
+++ b/components/uni-navbar-lite/uni-navbar-lite.uvue
@@ -1,6 +1,7 @@
 <template>
-  <view class="uni-navbar">
-    <view class="uni-navbar-inner" :style="navbarStyle">
+  <view class="uni-navbar">
+    <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
@@ -34,7 +35,11 @@
       textColor: {
         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({
@@ -84,7 +83,10 @@
     font-style: normal;
     color: #333;
   }
-
+
+  .status-bar {
+    height: var(--status-bar-height);
+  }
   .uni-navbar {
     background-color: #007aff;
   }
diff --git a/components/uni-navbar-lite/uni-navbar-lite.vue b/components/uni-navbar-lite/uni-navbar-lite.vue
deleted file mode 100644
index 550ec7dc39826a9914aa36d80ae9665d2b30b02d..0000000000000000000000000000000000000000
--- a/components/uni-navbar-lite/uni-navbar-lite.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<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>
diff --git a/pages/template/navbar-lite/navbar-lite.uvue b/pages/template/navbar-lite/navbar-lite.uvue
index bcbb66b29f5bda5098845fd0d30801da6e2f87d7..add066a334eaac19f7909ce115e4c0b9ed1b3383 100644
--- a/pages/template/navbar-lite/navbar-lite.uvue
+++ b/pages/template/navbar-lite/navbar-lite.uvue
@@ -1,6 +1,6 @@
 <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>