微信小程序顶部导航栏背景图片（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",//设置自定义导航栏 }

然后 



 



 



 



，自己封装一个组件                   ，

<template> <view class="prohibition"> <view class="demo" :style="[{background},{color},{height},{paddingTop}]"> <!-- 左侧返回按钮 --> <view class="left" @click="onBack" v-if="back" :style="[{color},{paddingTop}]"> <uni-icons type="arrowleft" size="30" :color=color></uni-icons> <!-- 此处图标使用的是 uni-ui图标 --> </view> <!-- 中间标题文字 --> <view class="title"> {{title}} </view> </view> </view> </template> <script> 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") } } } </script> <style lang="less"> .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; } } </style>

然后



















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

 代码在这里

<navbar class="header" :background="backgroundColor" back :title="title" @onBack="goBack"></navbar>

引入组件


     


     


     


     ，使用

踩了很多坑 




 




 




 



，制作不易


     


     


     


     。