Você pode usar a visualização de rolagem para obter efeitos semelhantes aos do tabBar
Você pode usar scroll-view componentes para personalizar um TabBar rolável, colocar cada subpágina da guia na visualização de rolagem e, em seguida, scrollIntoView() rolar até a guia correspondente por meio de métodos.
As etapas específicas são as seguintes:
- Adicione o componente de visualização de rolagem à página:
<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>Entre eles, tabBarList está um array que contém todas as informações da subpágina do TabBar, scrollX controla a direção da rolagem e currentIndex registra o índice da guia atualmente selecionado. O estilo do TabBar pode ser personalizado de acordo com as necessidades.
- Defina um método na página
onTabBarItemTap(). Este método será acionado quando a subpágina TabBar for clicada. Implemente oscrollIntoView()método no método para rolar até a subpágina Tab correspondente:
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();
},Entre eles, wx.createSelectorQuery() o método pode criar um objeto SelectorQuery, select() obter o nó especificado por meio do método do objeto e, em seguida, chamar boundingClientRect() o método para obter as informações de localização do nó. Finalmente, chame wx.pageScrollTo() o método para rolar a página. No wx.pageScrollTo() método, scrollTopcontrole scrollLeft a posição de rolagem e duration a duração da rolagem, que pode ser ajustada conforme necessário.