封装

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

@@ -0,0 +1,45 @@
+<script setup>
+import {reactive} from "vue";
+
+const ctx = reactive({
+  navHeight: 0,
+  statusBarHeight: 0,
+  capsuleWidth: 0,
+  search: {
+    keyword: ""
+  }
+})
+
+let capsule = uni.getMenuButtonBoundingClientRect(); // 小程序右上角胶囊信息
+let system = uni.getSystemInfoSync(); // 获取设备信息
+ctx.navHeight = system.statusBarHeight + capsule.height; // 导航栏的高度
+ctx.statusBarHeight = system.statusBarHeight // 与顶部的距离
+ctx.capsuleWidth = capsule.width; // 胶囊按钮与右侧的距离
+
+function searchKeyword() {
+  console.log(ctx.search.keyword)
+
+  uni.showModal({
+    title: '发起搜索',
+    content: `搜索关键字：${ctx.search.keyword}`,
+    showCancel: false
+  })
+}
+</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>
+</template>
+
+<style scoped>
+
+</style>

src/pages/index/index.vue

@@ -1,14 +1,5 @@
 <template>
-  <view class="navbar" :style="{ minHeight: navHeight + 'px' }" style="background: #1296db">
+  <NavBar/>
-    <view
-      class="topInfo"
-      :style="{
-      paddingTop: statusBarHeight + 'px',
-      paddingRight: capsuleWidth + 'px',
-    }">
-      <uni-search-bar v-model="search.keyword" bgColor="#EEEEEE" placeholder="请输入搜索内容" @confirm="searchKeyword" cancelButton="none"></uni-search-bar>
-    </view>
-  </view>
 
   <view class="content">
     <Banner/>
@@ -25,36 +16,27 @@
 
 <script>
 import moment from 'moment'
+import NavBar from "./components/nav-bar/index.vue"
 import Banner from "./components/banner/index.vue"
 import ZhiHuHotList from "./components/zhihu-hot-list/index.vue"
 let timer = null
 export default {
   components: {
+    NavBar,
     Banner,
     ZhiHuHotList
   },
   data() {
     return {
-      navHeight: 0,
+
-      statusBarHeight: 0,
-      capsuleWidth: 0,
       now: moment().format('YYYY-MM-DD HH:mm:ss'),
       title: 'Hello',
-
-      search: {
-        keyword: ""
-      }
     }
   },
   onLoad() {
 
   },
   mounted() {
-    let capsule = uni.getMenuButtonBoundingClientRect(); // 小程序右上角胶囊信息
-    let system = uni.getSystemInfoSync(); // 获取设备信息
-    this.navHeight = system.statusBarHeight + capsule.height; // 导航栏的高度
-    this.statusBarHeight = system.statusBarHeight // 与顶部的距离
-    this.capsuleWidth = capsule.width; // 胶囊按钮与右侧的距离
 
     if(timer){
       clearInterval(timer)
@@ -66,15 +48,7 @@ export default {
 
   },
   methods: {
-    searchKeyword() {
-      console.log(this.search.keyword)
 
-      uni.showModal({
-        title: '发起搜索',
-        content: `搜索关键字：${this.search.keyword}`,
-        showCancel: false
-      })
-    }
   }
 }
 </script>