0
点赞
收藏
分享

微信扫一扫

【iOS】引用计数(一)

七千22 2024-09-25 阅读 25

在 UniApp 中实现沉浸式导航栏并结合自定义导航栏组件

一、沉浸式导航栏设置

  1. pages.json中配置页面样式

    • 在需要设置沉浸式导航栏的页面的style选项中进行如下配置:
    {
      "pages": [
        {
          "path": "pages/pageName/pageName",
          "style": {
            "navigationStyle": "custom", // 自定义导航栏样式
            "app-plus": {
              "titleNView": false, // 关闭默认导航栏
              "statusbar": {
                "background": "#yourColor" // 设置状态栏颜色,与导航栏颜色一致可实现沉浸式效果
              }
            }
          }
        }
      ]
    }
    
    • yourColor替换为你想要的颜色值,通常与导航栏颜色一致,以实现沉浸式效果。
  2. 在页面中设置导航栏高度

    • 在页面的onLoad生命周期函数中获取设备信息,计算导航栏高度并设置给页面的样式。
    export default {
      data() {
        return {
          navHeight: 0
        };
      },
      onLoad() {
        const systemInfo = uni.getSystemInfoSync();
        this.navHeight = systemInfo.statusBarHeight + 44; // 44 为通常情况下导航栏的高度,可根据实际调整
      }
    };
    
    • 在页面的style中使用计算出的导航栏高度:
    .page-content {
       padding-top: {{navHeight}}px;
     }

二、自定义导航栏组件

  1. 创建自定义导航栏组件
    • components目录下创建一个名为customNavbar的文件夹,并在其中创建customNavbar.vue文件。
<template>
     <view class="custom-navbar">
       <view class="left-icon" @click="goBack">
         <!-- 左箭头图标 -->
         <icon name="arrow-left" />
       </view>
       <text class="title">{{title}}</text>
       <view class="right-icon" v-if="showRightIcon">
         <!-- 右侧图标 -->
         <icon name="more" />
       </view>
     </view>
   </template>

   <script>
   export default {
     props: {
       title: {
         type: String,
         default: ''
       },
       showRightIcon: {
         type: Boolean,
         default: false
       }
     },
     methods: {
       goBack() {
         uni.navigateBack();
       }
     }
   };
   </script>

   <style scoped>
  .custom-navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 44px;
     background-color: #yourColor; // 与沉浸式导航栏颜色一致
     padding: 0 16px;
   }
  .left-icon {
     width: 44px;
     height: 44px;
     display: flex;
     justify-content: center;
     align-items: center;
   }
  .title {
     flex: 1;
     text-align: center;
     font-size: 18px;
     color: #fff;
   }
  .right-icon {
     width: 44px;
     height: 44px;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   </style>
  1. 在页面中使用自定义导航栏组件
    • 在需要使用自定义导航栏的页面中引入并注册组件:
    <template>
      <view>
        <customNavbar :title="pageTitle" :showRightIcon="true" />
        <!-- 页面内容 -->
      </view>
    </template>
    
    <script>
    import customNavbar from '@/components/customNavbar/customNavbar.vue';
    
    export default {
      components: {
        customNavbar
      },
      data() {
        return {
          pageTitle: '页面标题'
        };
      }
    };
    </script>
    

通过以上步骤,就可以在 UniApp 中实现沉浸式导航栏和自定义导航栏组件。可以根据实际需求调整导航栏的样式和功能。

举报

相关推荐

0 条评论