|
0 D F3 Y3 e/ \
目前小程序已在前端占了一席之地，最近公司项目上用的就是小程序开发，由于功能及页面不是很多，所以直接原生开发，毕竟坑可能会少点，在开发过程中，小程序自带导航栏和客户的设计稿导航栏排在一起，感觉很别扭，因此要求去掉微信的自带导航栏，微信提供了这方面的api，接下来我们就实操。 
4 r3 w; a8 F+ p4 V' U 这是小程序官方文档截图，可以看到导航栏样式支持两种，默认是带导航栏，另外一种是自定义导航栏-custom，如果使用自定义导航栏，我们可以全局配置//app.json"window": {"navigationStyle" # w$ ]' ~- A+ O: [( d5 X0 v0 X6 I6 Q
: "custom"}单页面配置//page.json{"navigationStyle": "custom"}效果对比 
6 R) r* I1 H* v/ p* a4 ]' O 能明显的看出来，自定义导航栏页面内容已经顶到屏幕顶端，除了胶囊按钮，其他都是页面可控区域每个手机的屏幕都不一样，各家系统的状态栏高度也不一样，因此，我们在开发页面时要考虑屏幕的适配，有刘海的，要留出刘海的距离，没有的，要把状态栏高度留出来。 ! v2 R' h/ L, u) Y1 t
1.获取导航栏高度及按钮位置微信提供了获取导航栏高度的Api和胶囊按钮位置的Api// 系统信息const systemInfo = wx.getSystemInfoSync();// 胶囊按钮位置信息 : s5 J/ `* ~# G, i4 i ^/ G* u5 y
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();在控制台打印出这两个Api返回结果 
' U- R3 u( F @ 这里面我们只说几个我们接下来用到的参数statusBarHeight // 状态栏高度screenWidth // 胶囊的宽度top // 胶囊到顶部距离height // 胶囊的高度right // 胶囊距离右边的距离。 - J4 t/ D5 X+ ?1 n# H. A
通过这几个参数，我们可以计算出状态栏的高度，微信胶囊所占的高度（存在padding值，可以使元素和胶囊纵向居中）首先在app.js中定义全局data-globalDataglobalData: { navBarHeight:
' t0 g9 ]0 O. M1 |1 z 0, // 导航栏高度 menuBotton: 0, // 胶囊距底部间距（保持底部间距一致） menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致） menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
$ j m7 m( H+ f% Z/ h; N },新建个方法setNavBarInfo() {// 获取系统信息 const systemInfo = wx.getSystemInfoSync();// 胶囊按钮位置信息 const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
& U# O& r5 Q/ n, O% z/ ~ // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * - U: x/ k8 }4 ]; `7 S& f+ r! }
2 + menuButtonInfo.height + systemInfo.statusBarHeight;this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
: y3 Z% }5 @6 }0 Q, a this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;this.globalData.menuHeight = menuButtonInfo.right; . y- a- _$ Z$ c$ O+ r) ~
}在onLaunch中调用，因为我这个项目是所有的导航都不用微信自带的，所以在app.js中调用及设置data onLaunch() {this.setNavBarInfo() },到这里所需要用到的都已经存了起来，页面用法也比较简单，排除状态栏的高度，设置导航栏的高度和胶囊高度保持，用flex布局。
& }/ G0 f: e: H/ i4 n( `; I* U5 t 2.页面适配首先page.js中定义变量var app = getApp()Page({/** * 页面的初始数据 */ data: { navBarHeight: app.globalData.navBarHeight,
" S V H% N a% Z6 ` //导航栏高度 menuBotton: app.globalData.menuBotton, //导航栏距离顶部距离 menuRight: app.globalData.menuRight, //导航栏距离右侧距离
' I" I p7 a4 H1 z( ~2 {0 ^; f menuHeight: app.globalData.menuHeight, //导航栏高度 }})页面使用
6 [2 x' ]+ f' c6 @! J% |- S) c >
5 D, L) N( J( H px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:0px;padding:0 {{menuRight}}px;">
% l/ |8 @" U4 B' N3 D, n wxss/* 公共导航 */.nav {position: fixed;top: 0;left: 0;box-sizing : ~1 u: W2 Y# }0 y
: border-box;width: 100vw;z-index: 1000; }.nav-main {width: 100%;height: 100%;box-sizing: border-box;
; y4 o- e" q0 r! \5 w/ f2 Y position: relative; }.nav.capsule-box {position: absolute;box-sizing: border-box;width: 100%;display: flex; ' ~! m) }8 h. ^1 V _
align-items: center; }最终效果  / a4 r5 H$ u6 `' w
此种适配方案适应所有手机，应该说是最优的选择。 * y8 v! r8 e3 Y* z. z$ r% N
( |' Q2 |* e5 M# z! R* n: n0 K/ }7 x- k7 R. N# ]! U d8 q& k
* C8 }9 h; G! R, [; ?5 D% |. M" N, Q3 x3 U8 q
| 
