首页导航栏自定义

src/pages.json

@@ -10,7 +10,8 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "首页"
+				"navigationBarTitleText": "首页",
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -19,6 +20,12 @@
 				"navigationBarTitleText": "我的"
 			}
 		},
+		{
+			"path": "pages/category/category",
+			"style": {
+				"navigationBarTitleText": "分类"
+			}
+		},
 		{
 			"path": "pages/test-page/test-page",
 			"style": {
@@ -41,6 +48,12 @@
 				"pagePath": "pages/index/index",
 				"text": "首页"
 			},
+			{
+				"iconPath": "static/icon/category.png",
+				"selectedIconPath": "static/icon/category-select.png",
+				"pagePath": "pages/category/category",
+				"text": "分类"
+			},
 			{
 				"iconPath": "static/icon/My.png",
 				"selectedIconPath": "static/icon/My-select.png",

src/pages/category/category.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <view>
+    分类页
+  </view>
+</template>
+
+<style scoped>
+
+</style>

src/pages/index/index.vue

@@ -1,4 +1,17 @@
 <template>
+
+  <view class="navbar" :style="{ minHeight: navHeight + 'px' }" style="background: #1296db">
+    <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>
+
   <swiper indicator-dots circular :autoplay="false" class="banner">
     <swiper-item v-for="item in pic.list" :key="item.id">
       <image @tap="previewImage(item)" :src="item.url"></image>
@@ -22,6 +35,9 @@ let timer = null
 export default {
   data() {
     return {
+      navHeight: 0,
+      statusBarHeight: 0,
+      capsuleWidth: 0,
       now: moment().format('YYYY-MM-DD HH:mm:ss'),
       title: 'Hello',
       pic: {
@@ -35,10 +51,19 @@ export default {
             url: "https://www.httpbin.org/image/jpeg",
           },
         ]
+      },
+      search: {
+        keyword: ""
       }
     }
   },
   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)
     }
@@ -55,6 +80,15 @@ export default {
         indicator: 'default',
         loop: true
       })
+    },
+    searchKeyword() {
+      console.log(this.search.keyword)
+
+      uni.showModal({
+        title: '发起搜索',
+        content: `搜索关键字：${this.search.keyword}`,
+        showCancel: false
+      })
     }
   }
 }

src/pages/my-info/my-info.vue

@@ -20,10 +20,10 @@ function getLocation(){
   uni.getLocation({
     type: "wgs84",
     success: function (res) {
-      console.log(`当前位置: ${res.latitude}, ${res.longitude}`)
+      console.log(`当前位置: ${res.longitude},${res.latitude}`)
       uni.showModal({
         title: '获取位置成功',
-        content: `当前位置: ${res.latitude}, ${res.longitude}`,
+        content: `当前位置: ${res.longitude},${res.latitude}`,
         showCancel: false
       })
     },