更新记录
1.0.1(2023-08-24) 下载此版本
增加app.vue的说明
1.0.0(2023-08-24) 下载此版本
本插件提供两种自定义标题栏,一级和二级页面 一级:仅仅标题名称 二级:标题居中,返回页面和返回首页
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.5.2 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
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';