06 自定义导航栏开发。

06 自定义导航栏开发。

修正之前的一个注释

	//监听原生标题栏搜索框点击事件，前提是在page.json里面设置为disable为true 
	onNavigationBarSearchInputClicked(){
		uni.navigateTo({
			url:'../search/search',
		})
		
	},
	// 监听导航按钮点击事件
	onNavigationBarButtonTap() {
		uni.navigateTo({
			url: '../add-input/add-input',
		})
	},

思路

1 监听到寒兰按钮点击事件。

2 配置package.json 文件取消掉原生导航条。

3 嵌入hello-uniapp里面的自定义导航组件（凡是涉及的都拿过来，可以手机演示一下选一选）

1 监听到导航栏按钮点击事件(onload平级）。

//监听原生标题栏搜索框点击事件，前提是在page.json里面设置为disable为true 
onNavigationBarSearchInputClicked(){
	uni.navigateTo({
		url:'../search/search',
	})
	
},
// 监听导航按钮点击事件
onNavigationBarButtonTap() {
	uni.navigateTo({
		url: '../add-input/add-input',
	})
},

2 配置package.json 文件取消掉原生导航条。

      
{	"path" : "pages/add-input/add-input",
 "style" : {
                "app-plus":{
                  "titleNView":false
                }

3 嵌入hello-uniapp里面的自定义导航组件。

关于这个组件有官方文档吗，如果着急别看。直接看原来的组件，自己选择功能就ok。

<template>
	<view>
  
		<uni-nav-bar left-icon="back" :border="false" :statusBar="true" @clickLeft="back" >
			<view class="flex align-center justify-center w-100">
				<text class="font">所有人可见</text><text class="iconfont icon-shezhi ml-1"></text>
			</view>
		</uni-nav-bar>	
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components:{
			uniNavBar
		},
		data() {
			return {
				
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>

</style>