微信小程序标题栏封装

标题栏一般都是居中的，但有时需要对标题栏进行样式等修改，就需要定制.
首先是组件的微信wxml相当于html
wxml

<!--base-ui/nav-bar-2/index.wxml-->
<view class="nav-container" style="height:{{navigationBarAndStatusBarHeight}}px;">
    <view style="height: {{statusBarHeight}}px;"></view>
    <view class="nav-bar" style="height: {{navigationBarHeight}}px;">
        <view class="nav-left-arrow" bindtap="handleLeftBtnClick">
          <van-icon name="arrow-left" wx:if="{{isShow}}"/>
          
        </view>
        <view class="nav-title">{{navTitle}}</view>
    </view>
</view>
1
2
3
4
5
6
7
8
9
10
11

index.json
引用对应的组件

{
  "component": true,
  "usingComponents": {
    "van-icon": "@vant/weapp/icon/index"
  }
}
1
2
3
4
5
6

index.js
组件相关的js

import {
  useGetNavBarInfo
} from "../../hooks/index";


Component({
    properties:{
        navTitle:{
          type:String
        },
        isShow:{
          type:Boolean,
          value:true
        }
    },
    data:{
       //状态栏高度
       statusBarHeight: 0,
       //导航栏高度
       navigationBarHeight: 0,
       //胶囊按钮的高度
       menuButtonHeight: 0,
       //状态栏加导航栏高度
       navigationBarAndStatusBarHeight: 0,
    },
    lifetimes:{
      ready:async function(){
        await this.getrelateBarHeights();
      }
    },
    methods:{
      async getrelateBarHeights(){
        let { statusBarHeight,
          navigationBarHeight,
          menuButtonHeight,
          navigationBarAndStatusBarHeight}=
        await useGetNavBarInfo();
        this.setData({
          statusBarHeight,
          navigationBarHeight,
          menuButtonHeight,
          navigationBarAndStatusBarHeight
        })
      },
      handleLeftBtnClick(){
         let pages=getCurrentPages();
         console.log(pages)
         if(pages.length>1){
           wx.navigateBack({
             delta: 0,
           })
         }else{
           wx.reLaunch({
             url: '/pages/home/index',
           })
         }
      }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

/* base-ui/nav-bar-2/index.wxss */
.nav-container{
  width: 100%;
  top: 0;
  background-color:rgb(25,158,216);
  color: #ffffff;
}
.nav-container .nav-bar{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.nav-container .nav-bar .nav-title{
  margin-left: 20rpx;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

js文件

import {useSetNavbarInfo} from "./useSetNavbarInfo.js";
import {useShareInfo} from "./useShareInfo.js";
import {useHandleIsRegAction} from "./useHandleIsRegAction.js";
import {useVantDialog} from "./useVantDialog.js";
import {useHandleStatusCode} from "./useHandleStatusCode.js";
import {useGetNavBarInfo} from "./useGetNavBarInfo.js";
import {useHandleRoute,redirectNavigateTo} from "./useHandleRoute.js";
import {useGetAuthorization} from "./useGetAuthorization.js";
import {useGetStoreParams} from "./useGetStoreParams.js";
import {useShowLoading} from "./useShowLoading.js";
import {useSelectItemAndRefresh} from "./useSelectItemAndRefresh.js";
export {
  useGetNavBarInfo,
  useShareInfo,
  useHandleIsRegAction,
  useVantDialog,
  useHandleStatusCode,
  useSetNavbarInfo,
  useHandleRoute,
  redirectNavigateTo,
  useGetAuthorization,
  useGetStoreParams,
  useShowLoading,
  useSelectItemAndRefresh
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import {
    deviceStore
  } from "../store/index";
  export function useGetNavBarInfo(){
    return new Promise((resolve)=>{
      deviceStore.onStates(["statusBarHeight", "navigationBarHeight", "menuButtonHeight","navigationBarAndStatusBarHeight"], ({
        statusBarHeight,
        navigationBarHeight,
        menuButtonHeight,
        navigationBarAndStatusBarHeight
      }) => {
        resolve({
          statusBarHeight,
          navigationBarHeight,
          menuButtonHeight,
          navigationBarAndStatusBarHeight
        });
      })
    })
    
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

存储公共状态下的变量

import {
  HYEventStore
} from "hy-event-store";

const deviceStore=new HYEventStore({
   state:{
       //状态栏高度
    statusBarHeight:0,
    //菜单按钮的高度
    menuButtonHeight:0,
    //导航栏的高度
    navigationBarHeight:0,
    //导航栏+状态栏高度
    navigationBarAndStatusBarHeight:0,
   },
   action:{
     
   }
})

export {
  deviceStore
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

大功完成，打工人是真的累