使用自定义导航栏（二）

在项目文件下新建 components 文件

项目中引入 官方自定义导航栏 和 官方图标

 

 

 

 在自定义标题栏这里我把官方的标题栏和状态栏分开成了两个文件夹，如上图所示

 

把这个分解两个文件夹需要修改uni-nav-bar.vue的代码

 

 

 

import uniStatusBar from "../uni-status-bar/uni-status-bar.vue";

 

使用自定义标题栏需要把pages.json的globalStyle的导航栏样式取消默认的原生导航栏

 

 

 

 

 

 

页面中使用自定义导航栏

<template>
	<view>
		<uni-nav-bar :status-bar="true" fixed="true" backgroundColor="#FFFFFF" color="#000000" title="开发框架" />  
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue" //引入标题栏组件
	export default {
		data() {
			return {
				a
			}
		},
		components: {
			uniNavBar
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	
</style>

 

标签：bar,自定义,标题栏,nav,使用,uni,导航
来源： https://www.cnblogs.com/Intellectualscholar/p/15869692.html