小流程 导航系统按键在哪（QQ小流程自订navigationBar顶部导航系统栏，相容网络连接所有机种（附完整案例））一篇看清楚，

责任编辑首秀自对个人Chhatarpur网志：【FaxMiao对个人网志】，小流Q小相容两个高度关注Web后端开发控制技术、程导楚高度关注使用者新体验、航系航系历史记录后端点点滴滴，统按统栏秉持更多创作者，键Q机种为我们提供高效率控制技术昌明！流程连接例篇序言navigationBar坚信我们都不孤单把？自订整案今天他们就来说说自订navigationBar，把它发生改变成他们想的部导模样（搜索框+蕨麻、搜索框+回到按键+蕨麻等）。网络

路子暗藏原生植物式样以获取蕨麻按键、附完输入框相关数据德博瓦桑县先期排序根据不同机种排序出高机种的看清导航控制系统栏度，进行网络连接撰写捷伊导航控制系统栏引加进网页节录一、小流Q小相容暗藏原生植物的程导楚navigationBarwindow自上而下实用性里有位模块：navigationStyle（导航控制系统栏式样），default=预设式样，航系航系custom=自订式样。统按统栏

"window":{ "navigationStyle":"custom"}让他们看一看暗藏后的效用：

可以看到原生植物的navigationBar已经消亡了，剩静静地的蕨麻按键，蕨麻按键是难以暗藏的二、准备工作1.以获取蕨麻按键的产业布局边线重要信息他们用wx.getMenuButtonBoundingClientRect()。

【非官方文件格式】以获取蕨麻按键的产业布局边线重要信息，座标重要信息以萤幕右上角为圆心：constmenuButtonInfo=wx.getMenuButtonBoundingClientRect();width：长度 height：度

top：上边界线座标right：右边界线座标bottom：下边界线座标left：左边界线座标上面是非官方给的左图，方便快捷我们认知几个座标。

2.以获取控制系统重要信息用wx.getSystemInfoSync()【非官方文件格式】以获取控制系统重要信息，里头有位模块：statusBarHeight（输入框度），是他们前面排序整个导航控制系统栏的度需要加进的constsystemInfo

=wx.getSystemInfoSync();##### 三、排序方法他们先要知道导航控制系统栏度是怎么组成的，排序方法：导航控制系统栏度 = 输入框度 + 44示例 【源代码浏览】自订导航控制系统栏会应加进数个、甚至全部网页，所以PCB成模块，方便快捷初始化；上面是我写的两个单纯范例：。

app.jsApp({ onLaunch:function(options){ constthat=this;// 以获取控制系统重要信息 constsystemInfo=wx.getSystemInfoSync();

// 蕨麻按键边线重要信息 constmenuButtonInfo=wx.getMenuButtonBoundingClientRect();// 导航控制系统栏度 = 输入框度 + 44 that.globalData

.navBarHeight=systemInfo.statusBarHeight+44;that.globalData.menuRight=systemInfo.screenWidth-menuButtonInfo

.right;that.globalData.menuTop=menuButtonInfo.top;that.globalData.menuHeight=menuButtonInfo.height;},

// 数据都是根据当前机种进行排序，这样的方式相容大部分机器 globalData:{ navBarHeight:0,// 导航控制系统栏度 menuRight:0,// 蕨麻距右方间距（方保持左、右间距一致）

menuTop:0,// 蕨麻距底部间距（保持底部间距一致） menuHeight:0,// 蕨麻度（自订内容可与蕨麻度保证一致） }})app.json{ "pages":["pages/index/index"

],"window":{ "navigationStyle":"custom"},"sitemapLocation":"sitemap.json"}上面为模块代码：/components/navigation-bar/navigation-bar.wxml

="输入关键词！"style="height:{ { menuHeight}}px; min-height:{ { menuHeight}}px; line-height:{ { menuHeight}}px; left:{ { menuRight}}px; top:{ { menuTop}}px;"

>/components/navigation-bar/navigation-bar.json

{ "component":true}/components/navigation-bar/navigation-bar.jsconstapp=getApp()Component({ properties:

{ // defaultData（父网页传递的数据-就是提及模块的网页） defaultData:{ type:Object,value:{ title:"我是预设标题"},observer:function

(newVal,oldVal){ }}},data:{ navBarHeight:app.globalData.navBarHeight,menuRight:app.globalData.menuRight

,menuTop:app.globalData.menuTop,menuHeight:app.globalData.menuHeight,},attached:function(){ },methods:

{ }})/components/navigation-bar/navigation-bar.wxss.nav-bar{ position:fixed;width:100%;top:0;color:#fff

;background:#000;}.nav-bar.search{ width:60%;color:#333;font-size:14px;background:#fff;position:absolute

;border-radius:50px;background:#ddd;padding-left:14px;}以下是初始化网页的代码，也就是提及模块的网页：/pages/index/index.wxml<

navigation-bardefault-data="{ { defaultData}}">/pages/index/index.json{ "usingComponents"

:{ "navigation-bar":"/components/navigation-bar/navigation-bar"}}/pages/index/index.jsconstapp=getApp();

Page({ data:{ // 模块模块设置，传递到模块 defaultData:{ title:"我的主页",// 导航控制系统栏标题 }},onLoad(){ console.log(this.data.height

)}})效用图：

好了，以上就是全部代码了，我们可以文中复制代码，也可以【浏览源代码】，直接到开发者工具里运行，记得appid用自己的或者测试哦！上面附几张其它小流程的效用图，我们也可以尝试照着做：

总结责任编辑写了自订navigationBar的一些基础性东西，里头涉及模块用法、模块传递、导航控制系统栏相关由于测试环境有限，我们在使用时如果发现有什么问题，希望及时反馈，德博瓦桑县及时更新帮助更多的人！我们有什么疑问，欢迎评论区留言！。

最新评论