详细说明mpvue中小程序自定义导航组件的开发指南

本笔记主要记录基于mpvue的小程序中自定义导航的思想和应用。分享一下，吸引更多关注。如有错误或优化空间，欢迎交流。

小程序的配置项navigationStyle设置为custom后，导航栏只保留右上角的胶囊按钮，颜色和标题文字内容可以自定义，可以实现导航栏的个性化需求，比如沉浸式视频播放页面。

7.0.0以后的小程序版本开始支持自定义单个页面的导航栏，页面的navigationStyle可以设置为自定义。mpvue的配置如下：

由于不同操作系统、不同机型的导航栏高度不同，定制导航栏需要解决的核心问题是不同机型导航栏高度的兼容性。

如上图所示，导航栏由两部分组成：状态栏和标题栏。状态栏是用于显示时间和网络状态的栏。全屏(刘海屏)模式的状态栏会比其他屏幕高很多：带刘海屏的ios系统是44，其他是20，包括pad。安卓机更有价值。我们可以通过微信的apiwx.getSystemInfo获取statusBarHeight。但是，标题栏的高度不能通过applet的api获得。根据几款同级机型的测试数据，我们基本上可以按照ios和安卓中的44px来计算。这样，就很容易做到了。通过statusBarHeight获取状态栏的高度，并判断当前系统添加了相应的标题栏后，即可获得正确的导航栏高度。

模板中的Html生成：(因为小程序中的视频组件级别最高，不会被普通的html标签覆盖，所以所有的导航栏组件都使用cover-view标签。):

模板div class='comp-navbar '！-占位符栏-封面-视图类='占位符栏' : style=' { height : nav bar height ' px ' } '/封面-视图！-导航栏正文-封面-视图类=' nav bar ' : style=' { height : nav bar height ' px，background color : nav background color } '！-状态栏-封面-视图类=' nav-status bar ' : style=' { height : status bar height ' px ' } '/封面-视图！-标题栏-封面-视图类=' nav-标题栏' : style=' {height :标题栏高度' px'} '！- home和back按钮-cover-view class=' bar-options ' cover-view v-if=' back visible ' class=' opt-back ' @ click=' back click()' cover-image class=' back-image ' src=' http :/static/images/back . png '/cover-image/cover-view cover-view class=' line ' v-if=' back visible homePath '/cover-view cover-view-view v-if=' homePath ' class=' opt-opt-home ' @ click=' home-title-cover-view class=' bar-title ' : style='[{ color : title color }]' { { title } }/cover-view/cover-view/div/template js代码：

before Mount(){ const self=this；wx . getsysteminfo({ success(system){ console . log(` system3360 `，system)；self . status barheight=system . status barheight；self . platform=system . platform；let PlatformReG=/IOs/I；if(platformreg . test(system . platform)){ self . title bar height=44；} else { self . title bar height=48；} self . nav bar height=self . status barheight self . title bar height；} });}，自定义导航栏的可自定义内容：标题文本、文本颜色、标题栏背景颜色、是否显示后退按钮、主页按钮的地址。示例代码如下：

导航栏： title=' video title ' : navbackground color=' pink ' ' : title color=' green ' ' : back-visible=' true ' : home-path=' '/pages/Index/main ' '/导航栏最后呈现github地址，欢迎查看代码，欢迎使用star。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。