1.首先导入该组件或者下载压缩包使用该组件。（本人推荐直接在Hbulider插件导入到项目中）

下载地址

https://ext.dcloud.net.cn/plugin?id=813

2.其次在main.js文件进行全局引入该组件

import zhouWeiNavBar from "@/components/zhouWei-navBar";
Vue.component("nav-bar", zhouWeiNavBar);

3.或者在使用到的页面局部引入组件库，并注册组件（nvue页面必须是这样引入）

import navBar from "@/components/zhouWei-navBar";
export default {
    components: {navBar}
}

4.效果图如下

 下面来进行下滑导航栏变化的样式（前方高能）

   5.首先进行拿到滑动高度与不同手机导航的高度

<view class="status-box" :style="{height:status_height+'px'}" v-if="statusflag">
			<nav-bar backState="1000" :bgColor="bgColorList" bgColorAngle="90" fontColor="#FFF" :title="title">
			</nav-bar>
		</view>
		<!-- // 自定义头部 -->
		<view class="shop-bgimg" :style="{'--status_height':status_height+20+'px'}">
		    <image src="/static/wachat/845b75e59c6786cc8dbdcc233599aa1.jpg" style="width: 100%;" mode=""></image>
		</view>

//拿到滚动的高度
		onPageScroll(e) {
			 let that = this
			 const  query = uni.createSelectorQuery().in(this)
			 console.log(e)
			 query.select('.shop-bgimg').boundingClientRect(data=>{
			  if(e.scrollTop>=data.height){  //当滚动高度大于头部高度，就让状态栏盒子出现
			   that.statusflag = true
			   uni.setNavigationBarTitle({
			   	title: 'ucharts数据表柱状图'
			   })
			   uni.setNavigationBarColor({
			   	frontColor: "#ffffff",
			   	backgroundColor: "#8471f1"
			   })
			  }else{
			   that.statusflag = false
			  }
			 }).exec()
			},

6.直接上全部代码（亲测有效哦）

<template>
	<view class="content">
		<view class="status-box" :style="{height:status_height+'px'}" v-if="statusflag">
			<nav-bar backState="1000" :bgColor="bgColorList" bgColorAngle="90" fontColor="#FFF" :title="title">
			</nav-bar>
		</view>
		<!-- // 自定义头部 -->
		<view class="shop-bgimg" :style="{'--status_height':status_height+20+'px'}">
		    <image src="/static/wachat/845b75e59c6786cc8dbdcc233599aa1.jpg" style="width: 100%;" mode=""></image>
		</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
		<view class="aside">洒水多</view>
	</view>
</template>

<script>
	import navBar from "@/uni_modules/zhouWei-navBar/components/zhouWei-navBar/zhouWei-navBar.vue"; //头部自定义导航按需引入
	export default {
		components: {
			navBar
		},
		data() {
			return {
				title: '',
				scrollTop: 0,
				statusflag:false,
				// <!-- bgColor值 -->
				bgColorList: [{
						color: "#f68d78",
						scale: "0%"
					},
					// {color:"#9b80f5",scale:"20%"},
					// {color:"#8c76f4",scale:"80%"},
					{
						color: "#ea5858",
						scale: "100%"
					}
				],
			};
		},
	
		onLoad(name) {
			console.log(name)
			this.title = name.name
			uni.setNavigationBarTitle({
				title: 'ucharts数据表柱状图'
			})

		},
		methods: {
			onPageScroll(e) {
			 let that = this
			 const  query = uni.createSelectorQuery().in(this)
			 console.log(e)
			 query.select('.shop-bgimg').boundingClientRect(data=>{
			  if(e.scrollTop>=data.height){  //当滚动高度大于头部高度，就让状态栏盒子出现
			   that.statusflag = true
			   uni.setNavigationBarTitle({
			   	title: 'ucharts数据表柱状图'
			   })
			   uni.setNavigationBarColor({
			   	frontColor: "#ffffff",
			   	backgroundColor: "#8471f1"
			   })
			  }else{
			   that.statusflag = false
			  }
			 }).exec()
			},
		}
	}
</script>

<style lang="scss">
	.content {
		.header {
			position: relative;
			top: 0;
			left: 0;
			z-index: 99;

			image {
				width: 100%;
				height: 400rpx;
			}
		}
	}
</style>

7.下面看一下所有效果

        7-1.滑动前的效果

 7-2.滑动后的效果