小程序自定义头部、底部以及全局登录弹窗、适配各种手机的自定义头部底部组件

相信大家在做小程序的时候有些需求用原生的头部和底部是达不到想要的效果的
就需要自定义头部、底部以及全局的登录弹窗
自定义头部底部需要设置app.json内 把window下面的navigationStyle设置为“custom“

然后在页面index.json内添加组件的路径

在usingComponents下第一个为登录的组件，第二个为底部组件
头部的组件路径可以写在每个页面下也可以写在全局app.json内

<navigation-bar navbar-data='{{nvabarData}}'></navigation-bar> //头部
<view class="index" style='height: calc(100% - {{topHeight + topDistance}}px - {{botHeight}}rpx)'> //需要计算中间内容的高度
内容
</view> 
<tabbar activeIdx='0' auth='{{auth}}'></tabbar> //底部
<loginProp show="{{showLoginDlg}}" bindcancel="loginCancel" bindlogin='loginConfirm'></loginProp> //登录组件

showLoginDlg: false,
auth: 0,
nvabarData: {
  showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
  title: '首页', //导航栏 中间的标题
},
topHeight:  app.globalData.height, //在app.js里面全局配置获取 头部高度
topDistance: app.globalData.topDistance,//适配部分手机增加高度
botHeight: app.globalData.bottomDistance, //底部高度

案例下载地址https://download.csdn.net/download/weixin_48201140/12860086

如果需要根据权限判断展示的底部导航栏个数，那添加一个即可

this.setData({
     auth: this.data.auth < 5 ? 10 : 0
}