uniapp开发微信小程序自定义顶部导航栏

自定义导航栏渐变色，先上效果

使用uniapp开发小程序，在不同界面，要去对页面进行修改顶部导航栏。

比如说要去定义导航栏的背景颜色，常规的去定义导航栏背景颜色

全局定义导航栏

"window": { "navigationBarBackgroundColor": "#32A2FD",// 顶部背景颜色"navigationBarTitleText": "123456", // 顶部文字"navigationStyle": "default", // 是否自定义导航栏,当"default"为"custom"时开启自定义头部导航栏选项"navigationBarTextStyle": "white",// 顶部文字颜色 仅支持 white/black},

单页面定义导航栏

"path": "pages/cargo/pickUpGoods",//页面路径"style": {"navigationBarTitleText": "uni-app", // 顶部文字"navigationBarBackgroundColor": "#fff", // 顶部背景颜色"navigationBarTextStyle": "black" // 顶部文字颜色}

重点来了，导航栏设置渐变色

踩坑，开始我以为把顶部导航栏的颜色换成渐变的就可以了，但是不行

查了之后才知道，设置渐变色要去自定义背景颜色

首先 如果是全部页面就在window里面添加，如果是单页面就在页面添加

“navigationStyle”: “custom”

"path": "pages/cargo/shipments","style": {"navigationBarTitleText": "uni-app","navigationStyle": "custom",//设置自定义导航栏}

然后，自己封装一个组件，

{{title}}export default {data() {return {height: 0, paddingTop: 0,}},// props: ["title", "back"],props:{title:{ // 标题文字(默认为空)type:String,default:''},color:{ // 标题和返回按钮颜色(默认白色)type:String,default:'#fff'},//建议使用background因为使用backgroundColor，会导致不识别渐变颜色background:{ // 背景颜色(不传值默认透明)type:String,default:'transparent'},back:{ // 是否显示返回按钮(不传值默认不显示)type:Boolean,default:false},},created() {const demo = uni.getMenuButtonBoundingClientRect()this.height = demo.height + "px"this.paddingTop = demo.top + "px"},methods: {// 左侧返回按钮调用onBack() {this.$emit("onBack")}}}.demo {position: relative;//注意，建议使用相对定位，因为固定定位会脱离文档流，然后你还要去设置marginTop值// position: fixed;width: 100%;display: flex;align-items: center;justify-content: center;font-size: 26rpx;z-index: 100;padding-bottom: 10rpx;.left {float: left;position: absolute;width: 100rpx;height: 50rpx;top: 0;bottom: 0;left: 20rpx;color: #fff;margin: auto;}.title {font-size: 36rpx;font-family: Source Han Sans CN;// color: #FFFFFF;}}

然后，引入你的这个组件，写在页面的最上面

代码在这里

引入组件，使用

踩了很多坑，制作不易。