封装

src/pages/index/components/nav-bar/index.vue

@@ -7,11 +7,18 @@ const ctx = reactive({
   capsuleWidth: 0,
   search: {
     keyword: ""
+  },
+  safeAreaInsets: {
+    top: 0
   }
 })
 
 let capsule = uni.getMenuButtonBoundingClientRect(); // 小程序右上角胶囊信息
 let system = uni.getSystemInfoSync(); // 获取设备信息
+let {safeAreaInsets} = system
+console.log(system, safeAreaInsets)
+ctx.safeAreaInsets = safeAreaInsets
+
 ctx.navHeight = system.statusBarHeight + capsule.height; // 导航栏的高度
 ctx.statusBarHeight = system.statusBarHeight // 与顶部的距离
 ctx.capsuleWidth = capsule.width; // 胶囊按钮与右侧的距离
@@ -28,15 +35,8 @@ function searchKeyword() {
 </script>
 
 <template>
-  <view class="navbar" :style="{ minHeight: ctx.navHeight + 'px' }" style="background: #1296db">
-    <view
-      class="topInfo"
-      :style="{
-      paddingTop: ctx.statusBarHeight + 'px',
-      paddingRight: ctx.capsuleWidth + 'px',
-    }">
-      <uni-search-bar v-model="ctx.search.keyword" bgColor="#EEEEEE" placeholder="请输入搜索内容" @confirm="searchKeyword" cancelButton="none"></uni-search-bar>
-    </view>
+  <view :style="{paddingTop: ctx.safeAreaInsets.top + 'px', paddingRight: ctx.capsuleWidth + 'px'}" style="background: #1296db">
+    <uni-search-bar v-model="ctx.search.keyword" bgColor="#EEEEEE" placeholder="请输入搜索内容" @confirm="searchKeyword" cancelButton="none"></uni-search-bar>
   </view>
 </template>