使用 uniapp 适用于wx小程序 - 实现移动端头部的封装和调用

图例:红框区域,使其标题区与胶囊对齐

使用 uniapp 适用于wx小程序 - 实现移动端头部的封装和调用_第1张图片

 

一、组件 navigation.vue


 

 

二、页面调用


三、pages.json 相关设置

// 如果背景色是白色, 需要设置 pages.json 中顶部文字颜色为黑色,显示手机自带的信息

"globalStyle": {
	"navigationBarTextStyle": "black",
	"navigationBarTitleText": "远端小程序",
	"navigationBarBackgroundColor": "#F8F8F8",
	"backgroundColor": "#F8F8F8"
}

     希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~

你可能感兴趣的:(移动端,小程序,前端,javascript)