data: {
  tabs: [
	{ title: '全部', id: 1 }, 
	{ title: '待支', id: 2 }, 
	{ title: '待入住', id: 3 }, 
	{ title:'已取消', id: 4 }
	],
  activeTab: 1, // 当前激活tab
}

//切换tabs
changeTabs(e) {
  let { tab } = e.currentTarget.dataset
  this.setData({
    activeTab: tab
  })
},

<view class="tabs">
  <view class="tabs_title">
    <view wx:for="{{tabs}}" wx:key="index" data-tab="{{item.id}}"   
	class="tabs_item {{activeTab === item.id? 'tabActiveColor' : ''}} " 
	bindtap="changeTabs">{{item.title}}
    </view>
  </view>
  <view class="tabs_content">
    <view hidden='{{activeTab != 1}}'>页面1</view>
    <view hidden='{{activeTab != 2}}'>页面2</view>
    <view hidden='{{activeTab != 3}}'>页面3</view>
    <view hidden='{{activeTab != 4}}'>页面4</view>
  </view>
</view>

.tabs_title {
  display: flex;
  text-align: center;
  align-items: center;
  background-color: #fff;
}

.tabs_item {
  flex: 1;
  padding: 10rpx;
  height: 80rpx;
  box-sizing: border-box;
}

.tabActiveColor {
  border-bottom: 2px solid var(--text_color);
  color: var(--text_color);
}