自定义组件

自定义 navbar

1. 修改 pages.json，设置 navigationStyle 为 custom。

   {
     "pages": [
       {
         "path": "pages/index/index",
         "style": {
           "navigationStyle": "custom" // 使用自定义导航栏
         }
       }
     ]
   }

2. 封装自定义 navbar 组件。如：

   CustomNavbar.vue

   <template>
     <view class="custom-navbar">
       <view class="custom-navbar__wrap page-bg">
         <view class="custom-navbar-status" :style="{ height: `${statusBarHeight}px` }"></view>
         <view class="custom-navbar-title" :style="{ height: `${titleBarHeight}px` }"></view>
       </view>
       <view class="custom-navbar-fill" :style="{ height: `${statusBarHeight + titleBarHeight}px` }"></view>
     </view>
   </template>
   
   <script setup>
   import { onMounted, ref } from 'vue'
   import { getStatusBarHeight, getTitleBarHeight } from '@/utils/system.js'
   
   const statusBarHeight = getStatusBarHeight()
   const titleBarHeight = getTitleBarHeight()
   </script>
   
   <style lang="scss" scoped>
   .custom-navbar {
     .custom-navbar__wrap {
       position: fixed;
       top: 0;
       left: 0;
       z-index: 1000;
       width: 100%;
       background-color: darkorange;
     }
   }
   </style>

   system.js

   /**
   * 手机状态栏的高度
   * @returns
   */
   export function getStatusBarHeight(): number {
    const windowInfo = uni.getWindowInfo()
    const defaultStatusBarHeight = 0
    return windowInfo.statusBarHeight || defaultStatusBarHeight
   }
   
   /**
   * 获取右上角悬浮按钮布局
   * @returns
   */
   export function getMenuButtonBoundingClientRect() {
    const defaultRect = {
      bottom: 0,
      height: 0,
      left: 0,
      right: 0,
      top: 0,
      width: 0,
    }
    return uni.getMenuButtonBoundingClientRect() || defaultRect
   }
   
   /**
   * 获取标题栏高度
   * @returns
   */
   export function getTitleBarHeight(): number {
    // #ifdef H5
    return 44
    // #endif
   
    // #ifndef H5
    const MENU_BUTTON = getMenuButtonBoundingClientRect()
    const { top, height } = MENU_BUTTON
    const statusBarHeight = getStatusBarHeight()
    const gap = top - statusBarHeight
    return height + gap * 2
    // #endif
   }

   system.js（过时）

   // 获取状态栏高度
   export function getStatusBarHeight() {
     const SYSTEM_INFO = uni.getSystemInfoSync()
     return SYSTEM_INFO.statusBarHeight || 0
   }
   
   // 获取标题栏高度
   export function getTitleBarHeight() {
     // #ifdef H5
     return 44
     // #endif
   
     // #ifndef H5
     const SYSTEM_INFO = uni.getSystemInfoSync()
     const MENU_BUTTON = uni.getMenuButtonBoundingClientRect()
     const { top, height } = MENU_BUTTON
     const { statusBarHeight } = SYSTEM_INFO
     const gap = top - statusBarHeight
     return height + gap * 3
     // #endif
   }

自定义 tabbar

某些页面如何隐藏 tabbar？

// 页面加载时隐藏 tabBar
onLoad(() => {
  uni.hideTabBar()
})

// 页面显示时也隐藏 tabBar(防止从其他页面返回时显示)
onShow(() => {
  uni.hideTabBar()
})

使用自定义的 tabbar

1. 修改 pages.json，设置 tabBar.custom 为 true。

   {
     "tabBar": {
       "custom": true,
       "list": [
         {
           "pagePath": "pages/index/index",
           "text": "首页"
         },
         {
           "pagePath": "pages/logs/logs",
           "text": "日志"
         }
       ]
     }
   }

2. 封装自定义 tabbar 组件。仍然通过 switchTab 切换 tab，防止 tabbar 组件闪烁。

其他

默认 tabBar 高度为 50px (不含安全区)。

image 组件

懒加载

只针对 page 与 scroll-view 下的 image 有效。

微信小程序平台，加上 :lazy-load-margin="0"。

<image :src="item" mode="scaleToFill" lazy-load :lazy-load-margin="0"></image>