小程序自定义顶部navbar组件

//WXML  由于个人项目紧需求渐变灰所以这里没有去简化


  
  
  
  
    
  
    {{navbarData.title}}
  



  
  
  
  
    
  
    {{navbarData.title}}
  



  
  
  
  
    
  
    {{navbarData.title}}
  



  
  
  
  
    
  
    {{navbarData.title}}
  

//JS
const app = getApp()
Component({
  properties: {
    navbarData: {   //navbarData   由父页面传递的数据，变量名字自命名
      type: Object,
      value: {},
      observer: function (newVal, oldVal) { }
    }
  },
  data: {
    height: '',
    //默认值  默认显示左上角
    navbarData: {
      show_back: 1,
      show_color_id:1
    }
  },
  attached: function () {
    // 获取是否是通过分享进入的小程序
    this.setData({
      share: app.globalData.share
    })
    // 定义导航栏的高度   方便对齐
    this.setData({
      height: app.globalData.height
    })
  },
  methods: {
    // 返回上一页面
    btn_back() {
      wx.navigateBack()
    },
    //返回到首页
    btn_index() {
    wx.reLaunch({
      url: '/pages/_index/_index',
    })
    }
  }

})

 

 

//WXSS
/* 顶部绝对定位 */
.nava_top_cont_tab1 {
  position: fixed;
  width: 100%;
  top: 0;
  height: 135rpx;
  text-align: left;
  line-height: 135rpx;
  background: #fff;
  color: #000;
  z-index: 999;
}
.nava_top_cont_tab2 {
  position: fixed;
  width: 100%;
  top: 0;
  height: 135rpx;
  text-align: left;
  line-height: 135rpx;
  background: #E5E5E5;
  color: #000;
  z-index: 999;
}
.nava_top_cont_tab3{
    position: fixed;
  width: 100%;
  top: 0;
  height: 135rpx;
  text-align: left;
  line-height: 135rpx;
background:linear-gradient(0deg,rgba(255,210,0,1) 0%,rgba(255,228,0,1) 100%);
  color: #000;
  z-index: 999;
}

/* 标题 */
.navbar_title {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  top: 15%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 36rpx;
  color: #2c2b2b;
}
/* 避免用户点击区域太小增加区域杨氏 */
.left_icon_view{
width: 70rpx;
position: absolute;
height: 100rpx;
line-height: 100rpx;
}
/* 标题 */
.title {
  padding-left: 10%;
}
/* 返回按钮 */
.back_icon {
position:absolute;
left:30rpx;
display:inline-block;
width:20rpx;
height:37rpx;
top:42%;

}

 

//JSON
{
  "component": true
}

 

//调用方式--

//第一步
//index.WXML



//第二步

//index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 组件所需的参数
    nvabarData: {
      show_color_id: 3,
      show_back: 1,
      title: '我的名片', //导航栏 中间的标题
    },

}});

//第三步
{"navigationBarTitleText":"调用组件",
  "navigationBarBackgroundColor": "#FFE400",
  "navigationBarTextStyle": "black",
  "usingComponents": {
    "nav-bar": "../../components/navbar/navbar"
  }}