小程序开发的那些事--顶部导航

顶部导航

顶部导航作为组件形式出现

获取原生导航 胶囊的位置信息数据

this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect()
wx.getSystemInfo({
      success: function (res) {
        var model = res.model;
        var iponeX = model.indexOf("iPhone X")
        $this.globalData.systeminfo = res
        if (iponeX == '0') {
          wx.setStorageSync("isIpx", res.model);
        } else {
          wx.setStorageSync("isIpx", '');
        }
      }
 })

设置自定义导航的数据以及跳转

  attached: function () {
    let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度（电量时间显示栏）
    let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息
    let fontSize = app.globalData.systeminfo.fontSizeSetting //文字尺寸
    /**
     * wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点 （0，0）
     * 胶囊按键宽度： 87
     * 胶囊按键高度： 32
     * 胶囊按键左边界坐标： 278  //到（0，0）
     * 胶囊按键上边界坐标： 48  //到（0，0）
     * 胶囊按键右边界坐标： 365 //到（0，0）
     * 胶囊按键下边界坐标： 80 //到（0，0）
     */
    let btnPosi = { // 胶囊实际位置，
      height: headerPosi.height,
      width: headerPosi.width,
      bottom: headerPosi.top - statusBarHeight, //胶囊距离导航底部bottom
      right: app.globalData.systeminfo.screenWidth - headerPosi.right, // 胶囊距离导航盒左边距  = 屏幕宽度 - 胶囊right
      top: headerPosi.top
    }
    this.setData({
      statusBarHeight: statusBarHeight,
      navbarHeight: headerPosi.bottom + btnPosi.bottom, // 原胶囊bottom + 胶囊距离导航底部bottom  导航栏height（包括状态栏）
      lineheight: headerPosi.bottom + btnPosi.bottom - statusBarHeight, //去掉系统高度的高度
      navbarBtn: btnPosi,
      fontSize
    })

  },
    methods: {
    _goHome: function () {
      wx.switchTab({
        url: '/pages/index/index',
      });
    },
    _goBack: function () {
      wx.navigateBack({
        delta: 1
      });
    },
  }

样式

.navbar-wrap {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 9999999;
	background-color: #fff;
	box-sizing: border-box;
}

.navbar-text {
	text-align: center;
	font-size: 30rpx;
	color: #000;
}

.navbar-icon {
	position: fixed;
	display: flex;
	border-radius: 64rpx;
	box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
	border: 0.5px solid #eee;
	box-sizing: border-box;
	/* padding: 8px 15px 10px 10px; */
	border-radius: 64rpx;
}

.navbar-icon image {
	width: 30rpx;
	z-index: 19999;
	vertical-align: middle;
}
.navbarimg{
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.floatL{
	height: 15px;
	width: 2rpx;
	background-color: #eee;
}

设置导航结构

<view class='navbar-wrap' style='height:{{navbarHeight}}px;padding-top:{{statusBarHeight}}px;'>
	<view class="navbar-text" style='font-size:{{fontSize}}px;line-height:{{lineheight}}px;'>
		{{navbardata.title ? navbardata.title : "默认标题"}}
	</view>
	<view class="navbar-icon" style="width:{{navbarBtn.width}}px;top:{{navbarBtn.top}}px;left:{{navbarBtn.right}}px;height:{{navbarBtn.height}}px;">
		<image bindtap="_goBack"  src="/static/images/back.png" mode="widthFix"></image>
		<view  class="floatL"></view>
		<image bindtap="_goHome" src="/static/images/home.png" mode="widthFix"></image>
	</view>
</view>
<image style="width:100vw;height:{{navbarHeight}}px"></image>  //填充文档流空白

使用

//全局定义
  "usingComponents": {
    "login-box": "/components/login/index"
  }
  <header-navbar navbardata="{{nvabarData}}"></header-navbar> 
      nvabarData: {
      showCapsule: 1,
      // 是否显示左上角胶囊按钮 1 显示 0 不显示
      title: 'title' // 导航栏 中间的标题
    },