小程序自定义顶部navbar组件

版权声明：菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/85135126

//WXML  由于个人项目紧需求渐变灰所以这里没有去简化
<!-- 顶部tab视图 -->
<view class='nava_top_cont_tab1' wx:if="{{navbarData.show_color_id==1}}">
  <!-- 标题 -->
  <view class='navbar_title' style='line-height:120rpx;' bindtap='btn_back'>
  <!-- left--ICON -->
  <label class='left_icon_view' wx:if='{{navbarData.show_back}}' >
    <image  src='../../image/record/left.png' mode='aspectFill' class='back_icon'></image>
  </label>
    <label class='title'>{{navbarData.title}}</label>
  </view>
</view>
<!-- 灰色背景 -->
<view class='nava_top_cont_tab2' wx:if="{{navbarData.show_color_id==2}}">
  <!-- 标题 -->
  <view class='navbar_title' style='line-height:120rpx;'  bindtap='btn_back'>
  <!-- left--ICON -->
  <label class='left_icon_view' wx:if='{{navbarData.show_back}}' >
    <image src='../../image/record/left.png' mode='aspectFill' class='back_icon'></image>
  </label>
    <label class='title'>{{navbarData.title}}</label>
  </view>
</view>
<!-- 黄色色背景 -->
<view class='nava_top_cont_tab3' wx:if="{{navbarData.show_color_id==3}}">
  <!-- 标题 -->
  <view class='navbar_title' style='line-height:120rpx;' >
  <!-- left--ICON -->
  <label class='left_icon_view' wx:if='{{navbarData.show_back}}' >
    <image  src='../../image/record/left.png' mode='aspectFill' class='back_icon'></image>
  </label>
    <label class='title'>{{navbarData.title}}</label>
  </view>
</view>
<!-- 灰色背景 -->
<view class='nava_top_cont_tab2' wx:if="{{navbarData.show_color_id==4}}" >
  <!-- 标题 -->
  <view class='navbar_title' style='line-height:120rpx;' bindtap='btn_index'>
  <!-- left--ICON -->
  <label class='left_icon_view' wx:if='{{navbarData.show_back}}' >
    <image  src='../../image/record/left.png' mode='aspectFill' class='back_icon'></image>
  </label>
    <label class='title'>{{navbarData.title}}</label>
  </view>
</view>

//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
<!-- 顶部tab组件 -->
<nav-bar navbar-data='{{nvabarData}}'></nav-bar>

//第二步

//index.js
Page({

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

}});

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