更新记录
1.0.1(2023-08-24)
增加app.vue的说明
1.0.0(2023-08-24)
本插件提供两种自定义标题栏,一级和二级页面
一级:仅仅标题名称
二级:标题居中,返回页面和返回首页
平台兼容性
HbuilderX/cli最低兼容版本 |
3.5.2 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
简介
一直想做一个自定义的导航栏,主要是微信小程序做得多,因微信小程序的导航栏太单一,因此做一个这种通用的,后续有需要会增加更多的风格
如何使用部分
插件包主要是在小程序打开的时候在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';