【uni-app】自定义头部导航栏（可动态修改数据）

自定义头部导航栏（可动态修改数据）

创建components目录

1. 在pages.json中修改导航栏的样式，custom代表自定义

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationStyle": "custom"
			}
		}
	],

2. 点击新建组件，起名为customNavbar

<template>
	<view class="customnav">
		<view class="Nav">拥有的数量<span class="worker">(拥有{{data}}条数据)</span></view>
	</view>
</template>

<script>
	export default {
		name:"customNavbar",
		props:{
			data:{
				type:Number,
				default:1
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">

.customnav{
	width: 100%;
	height: 50px;
	background-color: #f0eacc;
	
}
.Nav{
	display: flex;
	justify-content: center;
	font-size: 16px;
	font-weight: bold;
	line-height: 50px;
	color: #000000;
}
.worker{
	font-size: 12px;
}
</style>

引入组件

在启动页（index.vue）中 script 标签内导入组件

<script>
	import customNavbar from '../../components/customNavbar.vue'
	export default {
		components:{
			customNavbar
		},
		data() {
			return {
				data:1
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

最终效果

这时启动为：

如果想要修改值在index页面内把data的值变了就好，接口传数据or自己写死都可。