uniapp自定义顶部导航栏

先上效果图：

下面是实现步骤

一、去掉原生的导航栏

在pages.json中对需要去掉原生顶部导航栏的页面配置中做如下配置：

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "首页",
		"navigationBarBackgroundColor":"#1890FF",
	    "navigationBarTextStyle": "white",
		"navigationStyle":"custom",// 去掉微信小程序顶部导航
		"app-plus":{
			"titleNView":false //去掉app+h5顶部导航
		}
	}
}

外附两张官网图：

二、下载官网推荐使用的导航栏插件

• 以下是官网推荐说明：
  
• 插件的下载连接：官网推荐的自定义导航栏下载连接
• 此链接内部也包含的该插件的基本使用文档。

三、NavBar 导航栏插件的基本使用

• 1.在下载成功之后，在main.js中做全局引入：

// 自定义导航栏组件
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
// 将自定义导航栏组件注册为全局组件
Vue.component('uni-nav-bar',uniNavBar)

• 2.在需要使用的界面template中

<uni-nav-bar 
	background-color="#0c73fe" 
	color="#fff" 
	:status-bar="status_bar" 
	:title="nav_title"
	@clickLeft="clickNavLeft()"
	@clickRight="clickNavRight()">
	<!-- 导航栏左侧插槽 -->
	<view slot="left">left</view>
	<!-- 右侧插槽 -->
	<view slot="right">right</view>
</uni-nav-bar>

外附一张网上插件的使用说明：

• 3. data数据模型中

data() {
	return {
		title: '你好，uniapp',
		// 导航栏文字
		nav_title:'我是导航栏',
		// 是否包含状态栏
		status_bar:true
	}
}

• 4. methods中

methods: {
	// 点击导航栏左侧
	clickNavLeft(){
		uni.showToast({
			title:'点击导航栏左侧',
			duration: 1500,
			icon:'none'
		});
	},
	// 点击导航栏右侧
	clickNavRight(){
		uni.showToast({
			title:'点击导航栏右侧',
			duration: 1500,
			icon:'none'
		});
	},
},