uni-app项目开发整理之自定义导航栏

自定义导航栏

方法一：
pages.json中进行配置：

	{
			"path": "pages/inventoryLedger/index",
			"style": {
				"navigationBarTitleText": "自定义导航栏",
				"app-plus": {
					"bounce": "none", //关闭窗口回弹效果
					"titleNView": {
						"buttons": [ //原生标题栏按钮配置,
							{
								"text": "分享", //原生标题栏增加按钮，点击事件可通过onNavigationBarButtonTap 函数进行监听
								"fontSize": "12"
							},
							{
								"text": "新增",
								"fontSize": "12"
							}
						],
						"backButton": { //自定义 backButton
							"background": "#00FF00"
						}
					}
				}
			}
		}

页面中写法如下：

<script>
	export default {
		onNavigationBarButtonTap(e) {
		//此处用来监听增加按钮得点击事件
		console.log(e)
		}
	}
</script>

方法二：引入扩展组件
pages.json中将navigationStyle设置为custom,来禁用原生导航栏
具体方法参见：uni ui 的NavBar 导航栏