可以使用 scroll-view 實現類似 tabBar 的效果

? ? 可以使用?scroll-view?組件來自定義一個可以滾動的 TabBar，將每個 Tab 子頁面放在 scroll-view 內，然后通過?scrollIntoView()?方法來滾動到對應的 Tab。

具體操作步驟如下：

1. 在頁面中添加 scroll-view 組件：

<view class="tab-bar">
  <scroll-view class="tab-bar-scrollview" scroll-x="{{scrollX}}" scroll-with-animation="{{true}}">
    <view class="tab-bar-item {{currentIndex === index ? 'active' : ''}}" wx:for="{{tabBarList}}" wx:key="{{index}}" data-index="{{index}}" bindtap="onTabBarItemTap">{{item.text}}</view>
  </scroll-view>
</view>

其中，tabBarList?是一個包含所有 TabBar 子頁面信息的數組，scrollX?控制滾動方向，currentIndex?記錄當前選中的 Tab 索引。TabBar 的樣式可以根據需求進行自定義。

1. 在頁面中定義?onTabBarItemTap()?方法，該方法會在 TabBar 子頁面被點擊時被觸發，在方法中實現?scrollIntoView()?方法來滾動到相應的 Tab 子頁面：

onTabBarItemTap(e) {
  const { index } = e.currentTarget.dataset;
  this.setData({
    currentIndex: index,
  });
  wx.createSelectorQuery()
    .in(this)
    .select(`#tab-bar-item-${index}`)
    .boundingClientRect((rect) => {
      wx.pageScrollTo({
        scrollTop: 0,
        scrollLeft: rect.left - 50,
        duration: 300,
      });
    })
    .exec();
},

其中，wx.createSelectorQuery()?方法可以創建一個 SelectorQuery 對象，然后通過該對象的?select()?方法獲取指定的節點，再調用?boundingClientRect()?方法獲取該節點的位置信息。最后，調用?wx.pageScrollTo()?方法實現頁面的滾動。在?wx.pageScrollTo()?方法中，scrollTop、scrollLeft?控制滾動位置，duration?控制滾動時長，可以根據需要進行調整。