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

自定义导航栏渐变色，先上效果
重点来了，导航栏设置渐变色
补充：更换图标
总结

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

文章图片

使用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",//设置自定义导航栏}

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

.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; } }

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