更新记录

1.0.1（2023-08-24）

增加app.vue的说明

1.0.0（2023-08-24）

本插件提供两种自定义标题栏，一级和二级页面 一级：仅仅标题名称 二级：标题居中，返回页面和返回首页

平台兼容性

简介

一直想做一个自定义的导航栏，主要是微信小程序做得多，因微信小程序的导航栏太单一，因此做一个这种通用的，后续有需要会增加更多的风格

如何使用部分

插件包主要是在小程序打开的时候在app.vue中直接获取到了导航栏的位置元素，直接计算结果后放入全局参数中，其他页面可直接getApp()获取。

因无法上传app.vue，此处补充：

export default {
    globalData:{
        headParam:{
            headerHeight:0,//导航栏总高度
            statusBarHeight:0,//状态栏高度（手机顶部的信号强弱、时间、手机电量那一栏）
            titleBarHeight:0,//不包含状态栏的高度
            bounding:{//胶囊
                bottom: 0,
                height: 0,
                left: 0,
                right: 0,
                top: 0,
                width: 0
            }
        },
    },  
    onLaunch: function() {
        //打开小程序时执行计算获取数据，其他页面可直接调用
        var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;//状态栏高度
        var bounding = uni.getMenuButtonBoundingClientRect();//小程序右侧胶囊的相关数据
        //通过胶囊的top部分和胶囊本身高度计算
        var titleBarHeight = (bounding.top - statusBarHeight) * 2 +bounding.height;//不包含状态栏的高度
        //将得到的数据放入全局参数中
        this.globalData.headParam.headerHeight = statusBarHeight + titleBarHeight;
        this.globalData.headParam.statusBarHeight = statusBarHeight ;
        this.globalData.headParam.titleBarHeight =  titleBarHeight;
        this.globalData.headParam.bounding = {
            bottom: bounding.bottom,
            height: bounding.height,
            left: bounding.left,
            right: bounding.right,
            top: bounding.top,
            width: bounding.width
        };
    },
    onShow: function() {
        //小程序从手机后台显示的钩子
    },
    onHide: function() {
        //小程序隐藏到手机后台的钩子
    }
}

底部调用图标css： @import './static/css/font/iconfont.css';