https://developers.weixin.qq…. 全局配置 window navigationStyle 导航栏样式，仅支持以下值：

    • default 默认样式
    • custom 自定义导航栏，只保留右上角胶囊按钮

    小程序代码片段
    wechatide://minicode/AMdHRJm27G3I

    【小程序 】自定义顶部导航栏,添加背景图,自定义返回按钮 - 图1

    • 设置 navigationStyle

      • /app.json
        1. // /app.json
        2. {
        3. "pages": [
        4. "index/index",
        5. "index/main",
        6. "index/second",
        7. "index/halfPage"
        8. ],
        9. "window": {
        10. "backgroundTextStyle": "light",
        11. "navigationBarBackgroundColor": "#fff",
        12. "navigationBarTitleText": "WeChat",
        13. "navigationBarTextStyle": "black",
        14. "navigationStyle": "custom"
        15. }
        16. }

    • /index/second.wxml

    1. <!--index/second.wxml-->
    2. <view class="halfPage">
    3.     <image mode="top" src="{{bg}}" class="image"/>
    4.     <view class="arrow" bindtap="goback"></view>
    5.     <view class="home"></view>
    6. </view>
    • /index/second.wxss
    1. /* index/second.wxss */
    2. .halfPage{
    3.   display: flex;
    4.   width: 100vw;
    5.   height: 100vh;
    6.   background-color: aliceblue;
    7. }
    9. .image{
    10.   position: fixed;
    11.   top: 0;
    12.   left: 0;
    13.   display: flex;
    14.   width: 100vw;
    15.   height: 30vh;
    16.   overflow: hidden;
    17. }
    19. .arrow{
    20.   position: fixed;
    21.   left: 40rpx;
    22.   top: 73rpx;
    23.   display: flex;
    24.   width: 35rpx;
    25.   height:35rpx;
    26.   border-left: 4rpx solid #6dc6ff;
    27.   border-top: 4rpx solid #6dc6ff;
    28.   transform: rotate(-45deg);
    29. }
    • /index/second.js
    1. // index/second.js
    2. Page({
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.     bg:'/image/bg.jpg'
    9.   },
    11.   goback(){
    12.     wx.navigateBack({delata:1})
    13.   }
    14. })

    原文链接：https://github.com/WangShuXian6/blog/issues/16