uni-app开发(4)---自定义导航栏开发

第1步：配置页面

"app-plus": {
	"scrollIndicator": "none", //隐藏滚动条
	"bounce": "none", //关闭反弹效果
	"titleNView": false
}

注意："titleNView": false配置可以禁用导航栏。

---

第2步：引入官方组件uni-icon、uni-nav-bar、uni-status-bar

备注：uni-icon.vue表示图标组件。uni-status-bar.vue组件表示状态栏组件。uni-nav-bar.vue表示导航栏组件。

---

第3步：组件分析

备注：左侧使用click-left事件监听，右侧使用click-right事件监听，中间部分可以配置title或者使用slot插槽，使用状态栏组件来配置状态栏。

---

第4步：在组件中引入导航栏组件。

	
	
		{{yinsi}}
		
	
	

	
	
		
			{{yinsi}}
			
		
	
	

备注：组件可以配置statusBar-是否添加状态栏，rightText-右侧文字，left-icon左侧图标，监听click-left，监听click-right，特别注意，APP端与H5端中间部分样式有些许区别，需要条件编译处理。

---

第五步：配置下拉菜单，并监听点击事件。

let changelook = ['所有人可见', '仅自己可见'];
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'

changeLook() {
	uni.showActionSheet({
		itemList:changelook ,
		success: (res) => {
			console.log(res);
			console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
			this.yinsi = changelook[res.tapIndex];
		},
		fail: (res) => {
			console.log(res.errMsg);
		}
	});
}

备注：在export外定义变量，不需要使用this指定。

---

效果图：