自定义导航栏

我们不同手机的导航栏不一样，这是为了确保我们每个手机都能看到我们导航栏的全部信息

不会被遮挡，给不同机型进行样式适配

 

1. 准备组件静态结构
2. 修改页面配置，隐藏默认导航栏，修改文字颜色
3. 样式适配 -> 安全区域

4. <script setup lang="ts">
   //
   </script>
   
   <template>
     <view class="navbar">
       <!-- logo文字 -->
       <view class="logo">
         <image class="logo-image" src="@/static/images/logo.png"></image>
         <text class="logo-text">新鲜 · 亲民 · 快捷</text>
       </view>
       <!-- 搜索条 -->
       <view class="search">
         <text class="icon-search">搜索商品</text>
         <text class="icon-scan"></text>
       </view>
     </view>
   </template>
   
   <style lang="scss">
   /* 自定义导航条 */
   .navbar {
     background-image: url(@/static/images/navigator_bg.png);
     background-size: cover;
     position: relative;
     display: flex;
     flex-direction: column;
     padding-top: 20px;
     .logo {
       display: flex;
       align-items: center;
       height: 64rpx;
       padding-left: 30rpx;
       padding-top: 20rpx;
       .logo-image {
         width: 166rpx;
         height: 39rpx;
       }
       .logo-text {
         flex: 1;
         line-height: 28rpx;
         color: #fff;
         margin: 2rpx 0 0 20rpx;
         padding-left: 20rpx;
         border-left: 1rpx solid #fff;
         font-size: 26rpx;
       }
     }
     .search {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0 10rpx 0 26rpx;
       height: 64rpx;
       margin: 16rpx 20rpx;
       color: #fff;
       font-size: 28rpx;
       border-radius: 32rpx;
       background-color: rgba(255, 255, 255, 0.5);
     }
     .icon-search {
       &::before {
         margin-right: 10rpx;
       }
     }
     .icon-scan {
       font-size: 30rpx;
       padding: 15rpx;
     }
   }
   </style>

   代码存放位置：src/pages/index/componets/CustomNavbar.vue

5. componets/CustomNavbar.vue需要新建的

6. 

    这里标红的地方是我报错的地方，我的解决方法如下：

7. 加入这几句话

8.  "target": "esnext",
       "module": "esnext",
       "strict": false,
       "jsx": "preserve",
       "moduleResolution": "node"

    

   
9. 获取安全距离

10. 

11. 

     这里我遇到的问题是仍然写完这些仍然没有适配，我们只需要重启以下vscode再点一下微信开发者工具中的编译就可以成功了

12.  

    我们如何验证是否成功呢，微信开发者工具里面可以更换机型。 

13.