微信小程序页面名称怎么变成tab选择器

如图所示
右边的名字直接用 ：navigationBarTitleText 属性就可以了
但是左边那种选择器的这么才能实现呢？

html：

<view class="tabs">
  <view class="tab-item {{status==1?'active':''}} " bindtap="handleTab" data-status="1">我的圈子</view>
  <view class="tab-item {{status==2?'active':''}} " bindtap="handleTab" data-status="2">其他圈子</view>
</view>

CSS:

.tabs {
    padding:0 20rpx;
    margin-top:40rpx;
    width:calc( 100% - 40rpx);
    height:80rpx;
}
.tab-item {
    height:60rpx;
    line-height:60rpx;
    float:left;
    position:relative;
    color:#666666;
    margin-right:20rpx;
}
.tab-item.active {
    color:#000000;
}
.tab-item.active::after {
    width:40rpx;
    height:4rpx;
    background:#000000;
    position:absolute;
    bottom:0rpx;
    left:50%;
    margin-left:-20rpx;
    content:'';
    display:block;
}

JS：

  /**
   * 页面的初始数据
   */
  data: {
    status:1//选中状态
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  handleTab(e){

    this.data.status=e.currentTarget.dataset.status
    this.setData({
      status:this.data.status
    })
  },

Json：

{
  "usingComponents": {},
  "navigationStyle":"custom"
}

小程序只要用到自定义custom，不管是全局页面还是单页面（以上是单页面），都需要处理不同机型头部高度兼容。
在app.js中

    // 获取导航高度；
    wx.getSystemInfo({
      success: res => {
        //导航高度
        this.globalData.navHeight = res.statusBarHeight * (750 / res.windowWidth) + 97;
      }, fail(err) {}
    });
    
  globalData: {
    navHeight: 0,

  },

单页中的js调用全局导航高度，处理自定义头部导航的高度

可以通过修改页面的json文件中的navigationStyle值，去掉原生的navigationBar，再去通过页面样式来进行改变。 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

可以自己写个组件 或者 用ui库