小程序顶部导航栏自定义组件封装

其他页面引入组件:

somePage.wxml

<stackNavigation title="商城" />

somePage.json

{
  "usingComponents": {
    "stackNavigation": "/component/stackNavigation/stackNavigation"
  }
}

stackNavigation的组件代码:

stackNavigation.js页面代码

// 页面顶部导航栏


Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: String,    //显示标题
    isHiddenBottomView: {
      type: Boolean,
      value: false,
    },               //是否撑开底部内容
    isHiddenLeftIcon: {
      type: Boolean,
      value: false,
    },               //是否隐藏左侧按钮
    r: {
      type: Number,
      value: 6,
    },
    g: {
      type: Number,
      value: 0,
    },
    b: {
      type: Number,
      value: 0,
    },
    a: {
      type: Number,
      value: 1,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    navH: 0,
    leftIcon: '/assets/image/newicon/back.png',
  },

  lifetimes: {
    attached() {
      let that = this

      wx.getSystemInfo({
        success: function ({ statusBarHeight, system }) {
          let titleBarHeight = 44
          if (system.indexOf('Android') !== -1) {
            titleBarHeight = 48
          }
          that.setData({
            navH: statusBarHeight + titleBarHeight,
            sBar: statusBarHeight,
          })
        },
      })
      let stack = getCurrentPages().length
      stack == 1 && ((_)=>{
        that.setData({
          leftIcon: '/assets/image/newicon/goHome.png',
        })
      })()
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {

    navBack() {
      let stack = getCurrentPages().length
      console.log('stack', stack)
      stack > 1 ? ((_) => {
        wx.navigateBack({
          delta: 1,
        })
      })() : ((_) => {
        wx.switchTab({
          url: '/pages/selectCre/selectCre',
        })
      })()
    },


  }


})

stackNavigation.wxml文件

<!--stackNavigation/stackNavigation.wxml-->
<view class='nav' style="height:{{navH}}px; background-color: rgba({{r}},{{g}},{{b}},{{a}});">
  <view class='nav-title' style="height: {{navH-sBar}}px; line-height: {{navH-sBar}}px;">
    {{title}}
    <image hidden="{{isHiddenLeftIcon}}" src="{{leftIcon}}" mode='aspectFit' class='back' bindtap='navBack' />
  </view>
</view>

<!--底部空内容，用于撑开-->
<view hidden="{{isHiddenBottomView}}" style="height: {{navH}}px; width: 750rpx;"></view>

stackNavigation.wxss文件

.nav{
  background-color: #060000;
  width: 750rpx;
  overflow: hidden;
  position: fixed;
  z-index: 150;
  top: 0;
  left: 0;
}
.nav-title{
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  font-family:PingFang-SC-Medium;
  font-size:35rpx;
  color: #ffffff;
  letter-spacing:2px;
}
.back{
  width: 22px;
  height: 22px;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 12px;
}