The capsules in the customized top navigation bar of the WeChat applet have the same transparent background color as the capsules that come with WeChat.

It is very simple to make the capsule background in the upper right corner of WeChat transparent. You only need to set the following configuration in pages.js:

                "navigationStyle": "custom",
                "navigationBarTextStyle": "white"

But after setting this, the background color of the capsule is that black translucent effect: (The effect displayed on the WeChat developer tool and the real machine are inconsistent, and the real machine shall prevail)

The effect of the mobile version: So the mobile version still has to prevail.

 

The back and home buttons on the left are my custom components, and the background color is:

background-color: #0000001f; 

Then there is the border used:

border: 0.5rpx solid #ffffff54;

Then you can adjust the background color and border that are the same as the WeChat official capsule on the right.

My top custom tab component source code:

<template>
  <view class="page_box">
    <!-- 行内式直接变量小程序不支持，故需要写成动态的变量 -->
    <view class="my_tab_title" :style="{ paddingTop: statusBarHeight }">
      <!-- 左侧自定义胶囊 -->
      <view class="menu_btn"
        :style="{ position: 'fixed', top: menuTop, left: menuRight, width: menuWidth, height: menuHeight, borderRadius: menuBorderRadius, }">
        <u-icon @click="goToBack" class="arrowleft" name="arrow-left" color='#fff' size="20"></u-icon>
        <text class="text_box"></text>
        <u-icon @click="goToHome" class="home" name="home" color='#fff' size="20"></u-icon>
      </view>
      <!-- 自定义标题 -->
      <!-- <text class="title">今日战绩</text> -->
    </view>
  </view>
</template>


<script setup lang="ts">

const statusBarHeight = uni.getStorageSync('menuInfo').statusBarHeight
//状态栏的高度（可以设置为顶部导航条的padding-top）
const menuWidth = uni.getStorageSync('menuInfo').menuWidth
const menuHeight = uni.getStorageSync('menuInfo').menuHeight
const menuBorderRadius = uni.getStorageSync('menuInfo').menuBorderRadius
const menuRight = uni.getStorageSync('menuInfo').menuRight
const menuTop = uni.getStorageSync('menuInfo').menuTop
// 距离顶部的距离，可以设置为内容区域的顶部外边距
const contentTop = uni.getStorageSync('menuInfo').contentTop

const goToBack = () => {
  console.log("返回按钮");
  uni.navigateBack({
    delta: 1
  })
}

const goToHome = () => {
  console.log("返回主页");
  uni.switchTab({
    url: '/pages/home/index'
  })
}

</script>

<style lang="scss" scope>
.page_box {
  .my_tab_title {
    z-index: 999;
    width: 100%;
    height: 44px; //这个是固定的44px（所有小程序顶部高度都是 = 44px + 手机系统状态栏高度）
    line-height: 44px;
    text-align: center;
    position: fixed;
    top: 0;
    z-index: inherit;
    font-family: Monospaced Number, Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
      Helvetica Neue, Helvetica, Arial, sans-serif !important;
    font-size: 32rpx;
    color: #000;
    font-weight: 500;

    .menu_btn {
      // background-color: #ffffff; //这个是小程序默认的标题栏背景色
      overflow: hidden;
      background-color: #0000001f;
      border: 0.5rpx solid #ffffff54;


      // position: fixed;//行内式写了固定定位--目的是去掉下划页面一起滚动问题
      .arrowleft {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-160%, -50%) !important;
        -webkit-transform: translate(-160%, -50%) !important;
      }

      .text_box {
        width: 1rpx;
        height: 20px;
        background-color: #ffffff54;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) !important;
        -webkit-transform: translate(-50%, -50%) !important;
      }

      .home {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(60%, -50%) !important;
        -webkit-transform: translate(60%, -50%) !important;
      }
    }

    .title {
      color: white;
      font-weight: 700;
    }
  }
}
</style>

 The final rendering introduced into the page: