微信小程序自定义头部（组件）

1.获取设备信息及胶囊按钮信息：

App({

  globalData: {

    navHeight:'',

    statusBarHeight:'',

    menuButtonHeight:'',

    windowHeight:''

  },

  onLaunch: function () {

    // 获取全局数据节点

    const that=this.globalData

    // 获取右侧胶囊按钮信息 bottom,height,left,right,top,width

    const menuButtonInfo=wx.getMenuButtonBoundingClientRect();

    // 获取设备基础信息

    wx.getSystemInfo({

      complete: ({statusBarHeight,windowHeight,windowWidth}) => {

        console.log(windowHeight,windowWidth)

        // 设置导航栏高度

        that.navHeight=statusBarHeight+menuButtonInfo.height+(menuButtonInfo.top-statusBarHeight)*2;

        // 获取胶囊按钮距离顶部的距离

        that.statusBarHeight=statusBarHeight;

        // 设置设备高度

        that.windowHeight=windowHeight;

      },

    })

  }

})

2.创建组件：

/**navBar.js**/

const App = getApp();

Component({

 

  /**

   * 组件的属性列表

   */

  properties: {

    pageName: String,  //中间的title

    showNav: {         //判断是否显示左上角的按钮    

      type: Boolean,    

      value: true

    },

    showHome: {         //判断是否显示左上角的home按钮

      type: Boolean,

      value: true

    }

  },

 

  /**

   * 组件的初始数据

   */

  data: {

    showNav: true,     //判断是否显示左上角的home按钮

    showHome: true,     //判断是否显示左上角的按钮

  },

  lifetimes: {

    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名

    attached: function () {

      this.setData({

        navHeight: App.globalData.navHeight,

        statusBarHeight: App.globalData.statusBarHeight

      })

    }

  },

  /**

   * 组件的方法列表

   */

  methods: {

    //回退

    navBack: function () {

      if(this.data.showNav){

        wx.navigateBack();

        return;

      }

      wx.navigateTo({

        url: '/pages/index/index'

      })

    },

  }

})

/**navBar.wxml**/

<view class="navbar" style="height:{{navHeight}}px;padding:{{statusBarHeight}}px 0 0">

  <text bindtap="navBack" wx:if="{{showNav}}" class="back" style="height:{{navHeight}}px;padding:{{statusBarHeight}}px 0 0 10px">返回</text>

  <text class="title">{{pageName}}</text>

</view>

/**navBar.wxss**/

.navbar {

  width: 100%;

  overflow: hidden;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 10;

  flex-shrink: 0;

  background: #000;

  display: flex;

  justify-content: center;

  align-items: center;

}

.title{

  font-size: 40rpx;

  color: #fff;

}

.back{

  position: fixed;

  top: 0;

  left: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #fff;

}

/**navBar.json**/

{

  "component":true

}

3.应用组件

/**index.json*/

{

  "usingComponents": {

    "navbar":"/components/navBar/navBar"

  }

}

/**index.html*/

<!--index.wxml-->

<view class="container">

  <navbar page-name="首页" show-nav="{{false}}" show-home="{{false}}"></navbar>

  <view class="userinfo">

    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

    <block wx:else>

      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>

      <text class="userinfo-nickname">{{userInfo.nickName}}</text>

    </block>

  </view>

  <view class="usermotto" bindtap="goPage">

    <text class="user-motto">{{motto}}</text>

  </view>

</view>

 

/**********************如果本案例对你有用记得点个赞************************/