小程序自定义tabbar_小程序自定义navbar

使用场景：多元化的应用场景需求，需要对navbar自定义处理。

知识点①：安卓导航栏高度为48px或者56px,大多数为48px

                ios导航栏基本高度为44px

                小程序胶囊高度均为32px

知识点②：状态栏：手机最顶部显示电量、时间、及wifi信号的区域

                  导航栏(navbar)：状态栏下胶囊及标题所在的区域

知识点③：非自定义navbar小程序通过wx.getSysteminfo获取到的safeArea和windowHeight 不计算导航栏的高度，而自定义的navbar则计算该区域

最终效果：保证navbar图标、标题、胶囊在同一高度

思路： ①wx.getMenuButtonBoundingClientRect()获取胶囊各项参数

           ② wx.getSystemInfo()获取页面参数

app.js函数写js方法

 onLaunch: function () {    var that = this    let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null    if (rect) {      that.globalData.navBarHeight = rect.top + rect.bottom      wx.getSystemInfo({        success: function (res) {                    that.globalData.navBarHeight = that.globalData.navBarHeight - res.statusBarHeight //          that.globalData.textHeight = that.globalData.navBarHeight - res.statusBarHeight          that.globalData.navbartop = res.statusBarHeight          that.globalData.navbarPadding = res.screenWidth - rect.right          that.globalData.searchboxwidth = rect.left - 100        }      });    } else {      wx.getSystemInfo({        success: function (res) {          if (res.platform == "devtools") {            that.globalData.navBarHeight = 60            that.globalData.textHeight = that.globalData.navBarHeight - res.statusBarHeight          } else if (res.platform == "ios") {            that.globalData.navBarHeight = 44 + res.statusBarHeight            that.globalData.textHeight = 44          } else if (res.platform == "android") {            that.globalData.navBarHeight = 48 + res.statusBarHeight            that.globalData.textHeight = 48          } else {            that.globalData.navBarHeight = 48 + res.statusBarHeight            that.globalData.textHeight = 48          }          that.globalData.navbartop = res.statusBarHeight          that.globalData.navbarPadding = 10          that.globalData.searchboxwidth = res.windowWidth - 197        }      });    }  },  globalData: {    navBarHeight: "", //navbar 高度    textHeight: "", //navbar文本高度    navbartop: "", //navbar文本上边距    navbarPadding: "", //navbar两边padding    searchboxwidth: "", //搜索框自适应宽度  },

navbar.wxml

<view class="top-wrap " style='height: {{navBarHeight}}px;background:#fff'>  <view class="top-inner flex-row flex"    style="margin-top:{{navbartop}}px;padding-left:{{navbarPadding}}px;height:{{textHeight}}px;line-height:{{textHeight}}px">    <view wx:if="{{isaddress}}" bindtap="updataaddress" class="top-address-box ">      <view class="flex flex-row address-wrap">        <view class="tab-box flex flex-col-center">          <van-icon name="location-o"size="16px" />        view>        <view class="top-address-text flex flex-col-center">          <view class="top-at" style="font-size:{{addresstitle.length>4?10:12}}px">            {{addresstitle}}          view>        view>      view>    view>    <view wx:if="{{issearch}}" style="width:{{searchboxwidth?searchboxwidth:144}}px" class="search-wrap flex flex-col-center">      <view class="search-box flex flex-row">        <view bindtap="submitinput" class="search-icon-wrap flex flex-col-center flex-row-center">          <van-icon name="search"size="16px"/>        view>        <view class="search-input" style="width:{{searchboxwidth?searchboxwidth-44:100}}px">          <input type="text" bindinput="bindinput" bindfocus="focusinput" bindblur="blurinput" confirm-type="search" bindconfirm="submitinput"  placeholder="{{inputplacehoder}}" placeholder-class="place-input-class" value="{{inputvalue}}" />        view>        <view wx:if="{{inputvalue}}" bindtap="clearinput" class="search-icon-wrap flex flex-col-center flex-row-center">          <van-icon name="clear"size="16px" />        view>      view>    view>  view>view><view style='height: {{navBarHeight}}px;'>view>

navbar.wxss

.top-wrap {    position: fixed;    width: 100%;    top: 0;    z-index: 9999999;    overflow: hidden;}.top-inner {    overflow: hidden;    width: 100%;    position: relative;}.top-address-box {    float: left;    width: 75px;    height: 100%;}.address-wrap {    width: 100%;    height: 100%;}.tab-box {    width: 22px;    height: 100%;}.tab-icon {    width: 22px;    height: 22px;}.top-at {    line-height: 14px;    text-align: center;    padding: 0px 4px;}.search-wrap {    height: 100%;    margin-left: 4px;}.search-box {    width: 100%;    height: 30px;    line-height: 30px;    background: #fff;    border-radius: 16px;    border: 1px solid #d5d5d5;}.search-icon-wrap {    width: 22px;    height: 100%;}.search-input {    width: 100px;    height: 100%;}

navbar.js

 data: {    navBarHeight: "", //navbar 高度    textHeight: "", //navbar文本高度    navbartop: "", //navbar文本上边距    navbarPadding: "", //navbar两边padding    searchboxwidth: "", //搜索框自适应宽度    isaddress: true, //地址展示    addresstitle: "全国", //地址展示    issearch: true, //是否展示搜索    inputvalue: "", //输入框值    inputplacehoder: "请输入搜索关键词", //输入框placehoder  },  // 小程序挂载之前执行  attached: function () {    var that = this    that.setData({      navBarHeight: app.globalData.navBarHeight,      textHeight: app.globalData.textHeight,      navbartop: app.globalData.navbartop,      navbarPadding: app.globalData.navbarPadding,      searchboxwidth: app.globalData.searchboxwidth    })  },

以上可以完整的实现一个自定义的navbar，下图是ios的一些数据

如果有用，请您借鉴！