uni app 自定义 头部组件（2） 局部 右侧按钮

上一篇为完全的自定义头部
链接：https://blog.csdn.net/qq_37403179/article/details/102955419

本片则是使用uniapp已有的自定义方法给头部添加按钮

1. pages.json 进行页面操作
   这里显示的“三”是文字图片，需要自己下载引用

"style": {
			"navigationBarTitleText": "标题名称",
			"app-plus": {
				"titleNView": {
				"buttons": [{
				"text": "",
				"fontSrc": "/static/iconfont.ttf",
				"fontSize": "22px",
				"float": "right"
			}]
		}
	}
}

2. 点击“三”触发的事件为

onNavigationBarButtonTap: function(e) {
	this.$refs.groupnavs.show();
},

里面的内容为点击后触发的操作，我在这里存放的是一个uniapp插件市场下载的弹出框组件（popup 弹出层组件），主键的调用方法与之前的方法一致
上一篇为完全的自定义头部
链接：https://blog.csdn.net/qq_37403179/article/details/102955419
ps：经过修改后还是和设计图有样式上面的差距，所以有意修改了css样式（app.vue）

	/* 头部外层的高度结构 */
	uni-page-head .uni-page-head {
		height: 120upx;
		padding-right: 19upx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid rgba(0,0,0,0.06);
	}
	/* 头部标题的样式 */
	uni-page-head .uni-page-head__title{
		font-family: 'PingFang_Regular'!important;
		color: #333333!important;
		font-size: 32upx!important;
	}
	uni-page-head .uni-page-head-ft {
		margin-top: 10upx;
	}
	/* 头部标题层的高度，不设置的话页面的内容会向上被头部遮挡 */
	uni-page-head .uni-page-head~.uni-placeholder {
		height: 120upx;
	}
/* 头部高度改变了原先的页面高度兼容也要想对应的改变 */
	uni-page-head[uni-page-head-type=default]~uni-page-wrapper {
	    height: calc(100% - 120upx);
	}

下一篇给自定义主键传值
链接：https://blog.csdn.net/qq_37403179/article/details/102956821