想要实现微信自带的右上角胶囊背景透明很简单，只需要在pages.js里面设置下面配置就可以了：

"navigationStyle": "custom",

"navigationBarTextStyle": "white"

但是设置完这个后，胶囊的背景色是那种黑色半透明的效果：（微信开发者工具和真机上显示的效果不一致，要以真机为准）

手机端的效果：所以还是要以手机端为准

 

左侧的返回和home按钮是我自定义的组件，背景色使用的是：

background-color: #0000001f; 

然后还有边框使用的是：

border: 0.5rpx solid #ffffff54;

然后就可以调出和微信官方右侧胶囊一样的背景色和边框了。

我的顶部自定义tab组件源代码：

 最后引入到页面中的效果图：

参考阅读

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。