uniapp自定义导航栏以及下滑导航变色

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.首先进行拿到滑动高度与不同手机导航的高度

			
			
		
		
		
		    
		

//拿到滚动的高度
		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.直接上全部代码（亲测有效哦）

7.下面看一下所有效果

        7-1.滑动前的效果

 7-2.滑动后的效果