微信小程序顶部导航栏刘海屏的横线问题

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f2615b",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

解决方法不要使用官方的顶部导航栏(这里使用了第三方的UI框架解决https://youzan.github.io/vant-weapp/#/quickstart)。

1、复制vant里面的common、icon、info、mixins、wxs、nav-bar组件到components文件夹中

2、修改app.json文件在window加上"navigationStyle": "custom"不使用自带的顶部导航栏

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationStyle": "custom",
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f2615b",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

3、在pages\index\index.json引入该组件

{
  "usingComponents": {
    "van-nav-bar": "/components/nav-bar/index"
  }
}

// miniprogram/pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navigation: {
      title: '导航标题', //导航标题
      leftArrow: true, //是否显示左侧箭头(返回按钮)
      leftText: "", //左侧文案
      fixed: true, //是否固定在顶部
      ui: "navUi", //导航样式
      border: false //是否显示下边框
    },
    statusBarHeight: wx.getSystemInfoSync().statusBarHeight, //顶部安全距离（状态栏高度）
  },

  // nav左侧箭头点击事件
  nav_onClickLeft: function() {
    // 返回页面
    app.backPage();
  }
})

<!--miniprogram/pages/index/index.wxml-->
<van-nav-bar title="{{navigation.title}}" border="{{navigation.border}}" left-text="{{navigation.leftText}}" left-arrow="{{navigation.leftArrow}}" fixed="{{navigation.fixed}}" bind:click-left="nav_onClickLeft" custom-class="{{navigation.ui}}" z-index='999' />
<view style="margin-top:{{statusBarHeight}}px;padding-top:44px">
  ccccccc
  <view>cccccc</view>
</view>

/* miniprogram/pages/index/index.wxss */
/* 导航栏样式 */
.navUi {
  background-color: #f2615bff !important;
}

.navUi .van-nav-bar__left {
  bottom: 10px;
  left: 10px;
}

.navUi .van-icon-arrow-left {
  color: #fff !important;
  font-size: 20px !important;
}

.navUi .van-nav-bar__title {
  color: #fff !important;
}
/* 导航栏样式 end*/

运行效果: