小程序修改顶部导航栏 | 您所在的位置:网站首页 › 小程序自带字体怎么设置 › 小程序修改顶部导航栏 |
微信头部导航栏可能通过json配置: 2自定义顶部导航栏 步骤: 1.在 app.json 里面把 “navigationStyle” 设置为 “custom” 这样子之后就只会保留右上角胶囊按钮了。 2.计算相关值 因为在不同的手机型号头部那条栏目高度可能不一致,所以为了我们适配更多型号,我们需要计算3个值: 如下图: 整个导航栏的高度; 胶囊按钮与顶部的距离; 胶囊按钮与右侧的距离。 小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息 和 wx.getSystemInfo() 获取设备信息。 如下图: 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2; 胶囊按钮与顶部的距离 = top; 3.胶囊按钮与右侧的距离 = windowWidth - right。 其中需要重点知道statausBarHeight指的是最顶部的设备时间wifi那些 App({ globalData: { }, onLaunch: function () { let menuButtonObject = wx.getMenuButtonBoundingClientRect(); wx.getSystemInfo({ success: res => { //导航高度 let statusBarHeight = res.statusBarHeight, navTop = menuButtonObject.top, navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2; // console.log(statusBarHeight) // console.log(menuButtonObject.height) // console.log(menuButtonObject.top) // console.log(statusBarHeight) // console.log(navHeight) this.globalData.navHeight = navHeight; this.globalData.navTop = navTop; //navTop this.globalData.windowHeight = res.windowHeight; }, fail(err) { console.log(err); } }) } }) 原文链接:https://blog.csdn.net/qq_42543264/article/details/104005296最后因为设置了自定义导航 所以所有页面都需要设置顶部的导航栏 因此将顶部导航栏封装为组件 |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |