微信小程序自定义顶部tap栏

标签：tap 状态栏 自定义 微信 胶囊 高度 globalData wx menuButtonInfo

第一步：隐藏原生导航栏效果

                                                （默认效果）

json中配置：

 "window": {    "navigationStyle": "custom"   }

 （成功去除顶部tab栏，只留下了胶囊，但轮播图直接与顶部图标融在一起了）

第二步：适应各种手机的边距

 

第一根竖线=  状态栏高度

胶囊顶部=  状态栏高度 + 第二根短竖线，

第三根竖线=  胶囊高度

故整个状态栏高度= 状态栏高度+胶囊高度+（胶囊顶部-状态栏高度）*2

js文件

知识点1：获取胶囊按钮信息【界面 / 菜单 / wx.getMenuButtonBoundingClientRect (qq.com)】

App({   onLaunch: function () {     const menuButtonInfo = wx.getMenuButtonBoundingClientRect();     console.log(menuButtonInfo)   

 知识点2：获取设备信息【基础 / 系统 / wx.getSystemInfo (qq.com)】

 try {       const res = wx.getSystemInfoSync()       console.log(res.statusBarHeight)；  获取状态栏高度     } catch (e) {       console.log("error");     }

 实现：保存数据信息

定义一个全局对象用于保存一些设备及胶囊的数据,  在其他页面onLoad之后可以通过const App = getApp()， App.globalData. 的方式访问 

App({   globalData:{     navBarHeight: 0, // 导航栏高度     menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）     menuTop: 0, // 胶囊距顶部间距     menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
  },

 onLaunch: function () {

    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();     try {       const res = wx.getSystemInfoSync()       this.globalData.navBarHeight = menuButtonInfo.top+menuButtonInfo.height+(menuButtonInfo.top-res.statusBarHeight)*2;       this.globalData.menuRight = menuButtonInfo.left;       this.globalData.menuTop = menuButtonInfo.top;       this.globalData.menuHeight = menuButtonInfo.height;     } catch (e) {       console.log("error");     }

 

标签：tap,状态栏,自定义,微信,胶囊,高度,globalData,wx,menuButtonInfo
From： https://www.cnblogs.com/yheyi/p/17972496