新建Tabs组件
Tabs.wxml

<view class="tabs"><view class="tabs_title"><viewbindtap="handleItemTap"data-index="{{index}}"wx:for="{{tabs}}"wx:key="id"class="title_item {{item.isActive?'active':''}}">{{item.value}}</view></view><view class="tabs_content"><slot></slot></view>
</view>

Tabs.wxss

.tabs .tabs_title {display: flex;
}
.tabs .tabs_title .title_item {display: flex;justify-content: center;align-items: center;padding: 15rpx 0;flex: 1;
}
.tabs .tabs_title .active {color: var(--themeColor);border-bottom: 5rpx solid currentColor;
}

Tabs.js

// components/Tabs/Tabs.js
Component({/*** 组件的属性列表*/properties: {tabs:Array,value:[]},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {handleItemTap(e){// 获取索引const {index}=e.currentTarget.dataset;// 触发 父组件中的自定义事件this.triggerEvent("tabsItemChange",{index});}}
})

order里面：

引入组件：

{"usingComponents": {"Tabs":"../../components/Tabs/Tabs"},"navigationBarTitleText": "订单查询","enablePullDownRefresh":true,"backgroundTextStyle":"dark"}

传入handleTabsItemChange事件

<!-- <view class="tabs"><view class="tabs_title"><viewbindtap="handleItemTap"data-index="{{index}}"wx:for="{{tabs}}"wx:key="id"class="title_item {{item.isActive?'active':''}}">{{item.value}}</view></view><view class="tabs_content"><view class="order_main"><view wx:for="{{orders}}"wx:key="id"class="order_item"><view class="order_no_row"><view class="order_no_text">订单编号</view><view class="order_no_value">{{item.orderNo}}</view></view><view class="order_price_row"><view class="order_price_text">订单价格</view><view class="order_price_value">¥{{item.totalPrice}}</view></view><view class="order_time_row"><view class="order_time_text">订单日期</view><view class="order_time_value">{{item.createDate}}</view></view></view></view></view>
</view> --><Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange"><view class="order_main"><view wx:for="{{orders}}"wx:key="id"class="order_item"><view class="order_no_row"><view class="order_no_text">订单编号</view><view class="order_no_value">{{item.orderNo}}</view></view><view class="order_price_row"><view class="order_price_text">订单价格</view><view class="order_price_value">¥{{item.totalPrice}}</view></view><view class="order_time_row"><view class="order_time_text">订单日期</view><view class="order_time_value">{{item.createDate}}</view></view></view></view>
</Tabs>

改个事件名：获取Tabs组件传来的index

  /*** tab点击事件处理* @param {} e */handleTabsItemChange(e){//   const {index}=e.currentTarget.dataset;const {index}=e.detail;  // 切换标题this.changeTitleByIndex(index);// 获取订单列表this.QueryParams.type=index;this.QueryParams.page=1;this.setData({orders:[]})this.getOrders();},