[{"data":1,"prerenderedAt":788},["ShallowReactive",2],{"blog-\u002Fblog\u002Fwechat_mini_program_custom_top_navigation_bar_demo":3},{"id":4,"title":5,"body":6,"category":774,"cover":775,"csdn":775,"date":776,"description":5,"draft":777,"extension":778,"meta":779,"navigation":252,"path":780,"seo":781,"stem":782,"tags":783,"updated":775,"__hash__":787},"blog\u002Fblog\u002Fwechat_mini_program_custom_top_navigation_bar_demo.md","微信小程序 【自定义顶部导航栏】 navigation bar demo",{"type":7,"value":8,"toc":768},"minimark",[9,13,16,23,28,31,44,47,54,59,64,69,77,144,311,649,733,736,741,746,751,755,760,764],[10,11,12],"p",{},"为啥放弃官方帮我们调试好的导航栏，而自己去慢慢调试一个呢",[10,14,15],{},"当然是源于【自己的需求】啦，新型肺炎期间重写的小程序 【头像贴纸加文字】",[10,17,18],{},[19,20],"img",{"alt":21,"src":22},"在这里插入图片描述","https:\u002F\u002Fimg.moooodapp.com\u002Fweb_hongweizhu_com_blog\u002F9027d46329b692d55291079922e4e4d1.png",[10,24,25],{},[19,26],{"alt":21,"src":27},"https:\u002F\u002Fimg.moooodapp.com\u002Fweb_hongweizhu_com_blog\u002F0e5fdbf37eefdfc0bd8d2f7c0d6550b2.png",[10,29,30],{},"嗯，有9人分享我的这个小程序，正常分享操作步骤为：",[32,33,34,38,41],"ol",{},[35,36,37],"li",{},"点击右上角三个点",[35,39,40],{},"发送给朋友",[35,42,43],{},"唤起聊天列表",[10,45,46],{},"如果在首页加一个分享按钮 会更快捷 ~",[32,48,49,52],{},[35,50,51],{},"点击左上角分享按钮",[35,53,43],{},[10,55,56],{},[19,57],{"alt":21,"src":58},"https:\u002F\u002Fimg.moooodapp.com\u002Fweb_hongweizhu_com_blog\u002F42dc4364055c2fea3b88690253ca3904.png",[10,60,61],{},[19,62],{"alt":21,"src":63},"https:\u002F\u002Fimg.moooodapp.com\u002Fweb_hongweizhu_com_blog\u002Ff97bbd1575cd33a527f98403e798e65b.jpg",[65,66,68],"h2",{"id":67},"点一下左上角就可以快速分享怎样实现呢","点一下左上角就可以快速分享，怎样实现呢",[32,70,71,74],{},[35,72,73],{},"首先在 app.json 中加 \"navigationStyle\": \"custom\" 编译后，原顶部导航栏消失",[35,75,76],{},"调节 view 代替原顶部导航栏 demo代码如下：",[78,79,84],"pre",{"className":80,"code":81,"language":82,"meta":83,"style":83},"language-js shiki shiki-themes github-light","\u002F\u002F app.js\nApp({\n    globalData: {\n        statusBarHeight: wx.getSystemInfoSync()['statusBarHeight']\n        \u002F\u002F 这个高度是手机系统 信号、时间、电量栏的高度   },\n})\n","js","",[85,86,87,96,107,113,132,138],"code",{"__ignoreMap":83},[88,89,92],"span",{"class":90,"line":91},"line",1,[88,93,95],{"class":94},"sAwPA","\u002F\u002F app.js\n",[88,97,99,103],{"class":90,"line":98},2,[88,100,102],{"class":101},"s7eDp","App",[88,104,106],{"class":105},"sgsFI","({\n",[88,108,110],{"class":90,"line":109},3,[88,111,112],{"class":105},"    globalData: {\n",[88,114,116,119,122,125,129],{"class":90,"line":115},4,[88,117,118],{"class":105},"        statusBarHeight: wx.",[88,120,121],{"class":101},"getSystemInfoSync",[88,123,124],{"class":105},"()[",[88,126,128],{"class":127},"sYBdl","'statusBarHeight'",[88,130,131],{"class":105},"]\n",[88,133,135],{"class":90,"line":134},5,[88,136,137],{"class":94},"        \u002F\u002F 这个高度是手机系统 信号、时间、电量栏的高度   },\n",[88,139,141],{"class":90,"line":140},6,[88,142,143],{"class":105},"})\n",[78,145,149],{"className":146,"code":147,"language":148,"meta":83,"style":83},"language-html shiki shiki-themes github-light","\u002F\u002F nav.wxml\n\u003Cview class=\"nav-top\" style=\"padding-top:{{statusBarHeight}}px\">\n  \u003Cview class=\"nav-top-img\" bindtap=\"onBack\">\n    \u003Cimage class=\"sharelogo\" src=\"..\u002F..\u002Fimg\u002Ficons\u002Fback.png\">\u003C\u002Fimage>\n  \u003C\u002Fview>\n\n  \u003Cview class=\"nav-top-txt\">头像贴纸加文字\u003C\u002Fview>\n  \u003Cview class=\"nav-top-pad\">\u003C\u002Fview>\n  \u003C!-- 为了使文字居中 -->\n\u003C\u002Fview>\n","html",[85,150,151,156,185,209,239,248,254,275,295,301],{"__ignoreMap":83},[88,152,153],{"class":90,"line":91},[88,154,155],{"class":105},"\u002F\u002F nav.wxml\n",[88,157,158,161,165,168,171,174,177,179,182],{"class":90,"line":98},[88,159,160],{"class":105},"\u003C",[88,162,164],{"class":163},"sB1qb","view",[88,166,167],{"class":101}," class",[88,169,170],{"class":105},"=",[88,172,173],{"class":127},"\"nav-top\"",[88,175,176],{"class":101}," style",[88,178,170],{"class":105},[88,180,181],{"class":127},"\"padding-top:{{statusBarHeight}}px\"",[88,183,184],{"class":105},">\n",[88,186,187,190,192,194,196,199,202,204,207],{"class":90,"line":109},[88,188,189],{"class":105},"  \u003C",[88,191,164],{"class":163},[88,193,167],{"class":101},[88,195,170],{"class":105},[88,197,198],{"class":127},"\"nav-top-img\"",[88,200,201],{"class":101}," bindtap",[88,203,170],{"class":105},[88,205,206],{"class":127},"\"onBack\"",[88,208,184],{"class":105},[88,210,211,214,217,219,221,224,227,229,232,235,237],{"class":90,"line":115},[88,212,213],{"class":105},"    \u003C",[88,215,216],{"class":163},"image",[88,218,167],{"class":101},[88,220,170],{"class":105},[88,222,223],{"class":127},"\"sharelogo\"",[88,225,226],{"class":101}," src",[88,228,170],{"class":105},[88,230,231],{"class":127},"\"..\u002F..\u002Fimg\u002Ficons\u002Fback.png\"",[88,233,234],{"class":105},">\u003C\u002F",[88,236,216],{"class":163},[88,238,184],{"class":105},[88,240,241,244,246],{"class":90,"line":134},[88,242,243],{"class":105},"  \u003C\u002F",[88,245,164],{"class":163},[88,247,184],{"class":105},[88,249,250],{"class":90,"line":140},[88,251,253],{"emptyLinePlaceholder":252},true,"\n",[88,255,257,259,261,263,265,268,271,273],{"class":90,"line":256},7,[88,258,189],{"class":105},[88,260,164],{"class":163},[88,262,167],{"class":101},[88,264,170],{"class":105},[88,266,267],{"class":127},"\"nav-top-txt\"",[88,269,270],{"class":105},">头像贴纸加文字\u003C\u002F",[88,272,164],{"class":163},[88,274,184],{"class":105},[88,276,278,280,282,284,286,289,291,293],{"class":90,"line":277},8,[88,279,189],{"class":105},[88,281,164],{"class":163},[88,283,167],{"class":101},[88,285,170],{"class":105},[88,287,288],{"class":127},"\"nav-top-pad\"",[88,290,234],{"class":105},[88,292,164],{"class":163},[88,294,184],{"class":105},[88,296,298],{"class":90,"line":297},9,[88,299,300],{"class":94},"  \u003C!-- 为了使文字居中 -->\n",[88,302,304,307,309],{"class":90,"line":303},10,[88,305,306],{"class":105},"\u003C\u002F",[88,308,164],{"class":163},[88,310,184],{"class":105},[78,312,316],{"className":313,"code":314,"language":315,"meta":83,"style":83},"language-css shiki shiki-themes github-light",".nav-top {\n  position: fixed;\n  width: 100%;\n  top: 0;\n  left: 0;\n  height: 45px;\n  background: #fff;\n  z-index: 999;\n  display: flex;\n  flex-direction: row;\n}\n\n.nav-top-img,\n.nav-top-pad {\n  height: 45px;\n  width: 45px;\n  background-color: red;\n}\n\n.nav-top image {\n  padding: 12.5px;\n  height: 20px;\n  width: 20px;\n}\n\n.nav-top-txt {\n  font-weight: 500;\n  text-align: center;\n  line-height: 45px;\n  flex: 1;\n}\n","css",[85,317,318,326,341,357,369,380,395,407,419,431,443,449,454,463,471,484,497,510,515,520,531,546,560,573,578,583,591,604,617,631,644],{"__ignoreMap":83},[88,319,320,323],{"class":90,"line":91},[88,321,322],{"class":101},".nav-top",[88,324,325],{"class":105}," {\n",[88,327,328,332,335,338],{"class":90,"line":98},[88,329,331],{"class":330},"sYu0t","  position",[88,333,334],{"class":105},": ",[88,336,337],{"class":330},"fixed",[88,339,340],{"class":105},";\n",[88,342,343,346,348,351,355],{"class":90,"line":109},[88,344,345],{"class":330},"  width",[88,347,334],{"class":105},[88,349,350],{"class":330},"100",[88,352,354],{"class":353},"sD7c4","%",[88,356,340],{"class":105},[88,358,359,362,364,367],{"class":90,"line":115},[88,360,361],{"class":330},"  top",[88,363,334],{"class":105},[88,365,366],{"class":330},"0",[88,368,340],{"class":105},[88,370,371,374,376,378],{"class":90,"line":134},[88,372,373],{"class":330},"  left",[88,375,334],{"class":105},[88,377,366],{"class":330},[88,379,340],{"class":105},[88,381,382,385,387,390,393],{"class":90,"line":140},[88,383,384],{"class":330},"  height",[88,386,334],{"class":105},[88,388,389],{"class":330},"45",[88,391,392],{"class":353},"px",[88,394,340],{"class":105},[88,396,397,400,402,405],{"class":90,"line":256},[88,398,399],{"class":330},"  background",[88,401,334],{"class":105},[88,403,404],{"class":330},"#fff",[88,406,340],{"class":105},[88,408,409,412,414,417],{"class":90,"line":277},[88,410,411],{"class":330},"  z-index",[88,413,334],{"class":105},[88,415,416],{"class":330},"999",[88,418,340],{"class":105},[88,420,421,424,426,429],{"class":90,"line":297},[88,422,423],{"class":330},"  display",[88,425,334],{"class":105},[88,427,428],{"class":330},"flex",[88,430,340],{"class":105},[88,432,433,436,438,441],{"class":90,"line":303},[88,434,435],{"class":330},"  flex-direction",[88,437,334],{"class":105},[88,439,440],{"class":330},"row",[88,442,340],{"class":105},[88,444,446],{"class":90,"line":445},11,[88,447,448],{"class":105},"}\n",[88,450,452],{"class":90,"line":451},12,[88,453,253],{"emptyLinePlaceholder":252},[88,455,457,460],{"class":90,"line":456},13,[88,458,459],{"class":101},".nav-top-img",[88,461,462],{"class":105},",\n",[88,464,466,469],{"class":90,"line":465},14,[88,467,468],{"class":101},".nav-top-pad",[88,470,325],{"class":105},[88,472,474,476,478,480,482],{"class":90,"line":473},15,[88,475,384],{"class":330},[88,477,334],{"class":105},[88,479,389],{"class":330},[88,481,392],{"class":353},[88,483,340],{"class":105},[88,485,487,489,491,493,495],{"class":90,"line":486},16,[88,488,345],{"class":330},[88,490,334],{"class":105},[88,492,389],{"class":330},[88,494,392],{"class":353},[88,496,340],{"class":105},[88,498,500,503,505,508],{"class":90,"line":499},17,[88,501,502],{"class":330},"  background-color",[88,504,334],{"class":105},[88,506,507],{"class":330},"red",[88,509,340],{"class":105},[88,511,513],{"class":90,"line":512},18,[88,514,448],{"class":105},[88,516,518],{"class":90,"line":517},19,[88,519,253],{"emptyLinePlaceholder":252},[88,521,523,525,529],{"class":90,"line":522},20,[88,524,322],{"class":101},[88,526,528],{"class":527},"shJU0"," image",[88,530,325],{"class":105},[88,532,534,537,539,542,544],{"class":90,"line":533},21,[88,535,536],{"class":330},"  padding",[88,538,334],{"class":105},[88,540,541],{"class":330},"12.5",[88,543,392],{"class":353},[88,545,340],{"class":105},[88,547,549,551,553,556,558],{"class":90,"line":548},22,[88,550,384],{"class":330},[88,552,334],{"class":105},[88,554,555],{"class":330},"20",[88,557,392],{"class":353},[88,559,340],{"class":105},[88,561,563,565,567,569,571],{"class":90,"line":562},23,[88,564,345],{"class":330},[88,566,334],{"class":105},[88,568,555],{"class":330},[88,570,392],{"class":353},[88,572,340],{"class":105},[88,574,576],{"class":90,"line":575},24,[88,577,448],{"class":105},[88,579,581],{"class":90,"line":580},25,[88,582,253],{"emptyLinePlaceholder":252},[88,584,586,589],{"class":90,"line":585},26,[88,587,588],{"class":101},".nav-top-txt",[88,590,325],{"class":105},[88,592,594,597,599,602],{"class":90,"line":593},27,[88,595,596],{"class":330},"  font-weight",[88,598,334],{"class":105},[88,600,601],{"class":330},"500",[88,603,340],{"class":105},[88,605,607,610,612,615],{"class":90,"line":606},28,[88,608,609],{"class":330},"  text-align",[88,611,334],{"class":105},[88,613,614],{"class":330},"center",[88,616,340],{"class":105},[88,618,620,623,625,627,629],{"class":90,"line":619},29,[88,621,622],{"class":330},"  line-height",[88,624,334],{"class":105},[88,626,389],{"class":330},[88,628,392],{"class":353},[88,630,340],{"class":105},[88,632,634,637,639,642],{"class":90,"line":633},30,[88,635,636],{"class":330},"  flex",[88,638,334],{"class":105},[88,640,641],{"class":330},"1",[88,643,340],{"class":105},[88,645,647],{"class":90,"line":646},31,[88,648,448],{"class":105},[78,650,652],{"className":80,"code":651,"language":82,"meta":83,"style":83},"var app = getApp();\n\nPage({\n  data: {\n    statusBarHeight: app.globalData.statusBarHeight,\n  },\n\n  onBack: function () {\n    wx.navigateBack({});\n  },\n});\n",[85,653,654,670,674,681,686,691,696,700,713,724,728],{"__ignoreMap":83},[88,655,656,659,662,664,667],{"class":90,"line":91},[88,657,658],{"class":353},"var",[88,660,661],{"class":105}," app ",[88,663,170],{"class":353},[88,665,666],{"class":101}," getApp",[88,668,669],{"class":105},"();\n",[88,671,672],{"class":90,"line":98},[88,673,253],{"emptyLinePlaceholder":252},[88,675,676,679],{"class":90,"line":109},[88,677,678],{"class":101},"Page",[88,680,106],{"class":105},[88,682,683],{"class":90,"line":115},[88,684,685],{"class":105},"  data: {\n",[88,687,688],{"class":90,"line":134},[88,689,690],{"class":105},"    statusBarHeight: app.globalData.statusBarHeight,\n",[88,692,693],{"class":90,"line":140},[88,694,695],{"class":105},"  },\n",[88,697,698],{"class":90,"line":256},[88,699,253],{"emptyLinePlaceholder":252},[88,701,702,705,707,710],{"class":90,"line":277},[88,703,704],{"class":101},"  onBack",[88,706,334],{"class":105},[88,708,709],{"class":353},"function",[88,711,712],{"class":105}," () {\n",[88,714,715,718,721],{"class":90,"line":297},[88,716,717],{"class":105},"    wx.",[88,719,720],{"class":101},"navigateBack",[88,722,723],{"class":105},"({});\n",[88,725,726],{"class":90,"line":303},[88,727,695],{"class":105},[88,729,730],{"class":90,"line":445},[88,731,732],{"class":105},"});\n",[65,734,735],{"id":735},"真机预览",[10,737,738],{},[19,739],{"alt":21,"src":740},"https:\u002F\u002Fimg.moooodapp.com\u002Fweb_hongweizhu_com_blog\u002F3ce6f541bf29fd142274fe4d14a37a0d.png",[10,742,743],{},[19,744],{"alt":21,"src":745},"https:\u002F\u002Fimg.moooodapp.com\u002Fweb_hongweizhu_com_blog\u002Fe8fc54a034f870399e708fa79929e480.png",[10,747,748],{},[19,749],{"alt":21,"src":750},"https:\u002F\u002Fimg.moooodapp.com\u002Fweb_hongweizhu_com_blog\u002F919721e51ffc33c080c85be38be848ec.png",[65,752,754],{"id":753},"csdn-新勋章看上去还不错哦","CSDN 新勋章看上去还不错哦",[10,756,757],{},[19,758],{"alt":21,"src":759},"https:\u002F\u002Fimg.moooodapp.com\u002Fweb_hongweizhu_com_blog\u002F8e646fb12fc406053992daea4afe97d5.png",[65,761,763],{"id":762},"希望这篇博客可以带给你帮助","希望这篇博客可以带给你帮助 ~~~",[765,766,767],"style",{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sB1qb, html code.shiki .sB1qb{--shiki-default:#B31D28;--shiki-default-font-style:italic}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .shJU0, html code.shiki .shJU0{--shiki-default:#22863A}",{"title":83,"searchDepth":98,"depth":98,"links":769},[770,771,772,773],{"id":67,"depth":98,"text":68},{"id":735,"depth":98,"text":735},{"id":753,"depth":98,"text":754},{"id":762,"depth":98,"text":763},"微信小程序",null,"2020-03-02",false,"md",{},"\u002Fblog\u002Fwechat_mini_program_custom_top_navigation_bar_demo",{"title":5,"description":5},"blog\u002Fwechat_mini_program_custom_top_navigation_bar_demo",[774,784,785,786],"自定义导航栏","navigationStyle","分享按钮","lEGVXTI2Ht96LiywMhM8sXtPccOon1Dabsg1FtgQ864",1793010851424]