微信小程序顶部去除默认样式后依旧显示返回按钮和顶部页面名称

微信小程序顶部白边变透明后依旧显示返回按钮和顶部标题名称

⭕️ 实现效果：

正文

1⃣️ 官方并没有提供相关的api

2⃣️ 本文实现的效果能响应式的适配任何机型（安卓苹果通用）

3⃣️ 先得去iconfont下载一个返回按钮的图标

⭕️ 步骤一

在app.js里面写入以下代码：

// app.js
App({
  onLaunch() {
    // 获取系统关键数据
    wx.getSystemInfo({
      success: (res) => {
        // 响应式获取微信顶部状态栏高度
        this.globalData.statusBarHeight = res.statusBarHeight
      }
    })
  }
})

⭕️ 步骤二

复制以下代码黏贴到对应的文件中：
headerNav.wxml

<view class="headerNav" style="margin-top:{{height*2+20}}rpx">
    <image src="「返回按钮」图标的链接" class="navBackImg" bindtap="navigateBackPage" style="visibility: {{showNavBackBtn?'unset':'hidden'}}"></image>
    <view class="navTitle">{{text}}</view>
</view>

headerNav.js

Component({
    /**
     * Component properties
     */
    properties: {
        text: String,
        showNavBackBtn:{
            type:Boolean,
            value:true
        }
    },

    /**
     * Component initial data
     */
    data: {
        height: ''
    },
    attached: function () {
        // 响应式定义导航栏的高度
        this.setData({
            height: getApp().globalData.statusBarHeight
        })
    },
    /**
     * Component methods
     */
    methods: {
        navigateBackPage: function () {
            wx.navigateBack({
                delta: 1,
            })
        },
    }
})

headerNav.wxss

.navBackImg {
    width: 45rpx;
    height: 45rpx;
    margin-left: 40rpx;
}

.headerNav {
    display: flex;
    align-items: center;
}

.navTitle {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 700;
    font-size: 30rpx;
    line-height: 34rpx;
    color: #000000;
    width: 100%;
    /* margin-right是根据左侧返回图标和返回图标margin-left的计算值，
    为了可以让导航标题配合flex布局在任何页面中居中 */
    margin-right: 85rpx;
    display: flex;
    justify-content: center;
}

headerNav.json

{
    "component": true,
    "usingComponents": {}
}

⭕️ 步骤三：使用组件

1⃣️ 引入组件

2⃣️ 使用组件

效果：