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