[t-tabs] Tabs 选项卡 底部指示器 track 显示不出来

[lianyu88888888]

tdesign-miniprogram 版本

1.10.1

重现链接

No response

重现步骤

<t-popup
 
  
  bind:visible-change="onVisibleChange"
 
  placement="bottom" 
  visible="{{show}}"
>
  
<view class="block">
    <view class="header">
      <view class="btn btn--cancel" aria-role="button"></view>

    </view>
  </view>

<t-tabs class="custom-tab-bar" defaultValue="{{0}}"  bind:change="onTabsChange" bind:click="onTabsClick" t-class="custom-tabs">
  <t-tab-panel label="出发地" value="0" >
    <view class="address-section">
      <!-- 地址列表 -->
    <view class="address-list" wx:if="{{!isCollapsed}}">
      <view 
        class="address-item" 
        wx:for="{{addressList}}" 
        wx:key="id"
        bindtap="selectAddress"
        data-id="{{item.id}}"
      >
        <!-- 选择状态图标 -->
        <view class="select-icon {{selectedAddressId === item.id ? 'selected' : ''}}">
          <view class="icon-inner" wx:if="{{selectedAddressId === item.id}}"></view>
        </view>

        <!-- 地址信息 -->
        <view class="address-info">
          <view class="address-name">{{item.name}}</view>
          <view class="address-detail">{{item.detail}}</view>
        </view>

        <!-- 修改按钮 -->
        <view class="modify-btn" bindtap="modifyAddress" data-id="{{item.id}}">
          修改
        </view>
      </view>
    </view>
    </view>

    


  </t-tab-panel>


  <t-tab-panel label="目的地" value="1" >
    <view class="address-section">
       <!-- 地址列表 -->
       <view class="address-list" wx:if="{{!isCollapsed}}">
      <view 
        class="address-item" 
        wx:for="{{addressList}}" 
        wx:key="id"
        bindtap="selectAddress"
        data-id="{{item.id}}"
      >
        <!-- 选择状态图标 -->
        <view class="select-icon {{selectedAddressId === item.id ? 'selected' : ''}}">
          <view class="icon-inner" wx:if="{{selectedAddressId === item.id}}"></view>
        </view>

        <!-- 地址信息 -->
        <view class="address-info">
          <view class="address-name">{{item.name}}</view>
          <view class="address-detail">{{item.detail}}</view>
        </view>

        <!-- 修改按钮 -->
        <view class="modify-btn" bindtap="modifyAddress" data-id="{{item.id}}">
          修改
        </view>
      </view>
    </view>

    </view>


  </t-tab-panel>
</t-tabs>

  <!-- 地址列表区域 -->
  <view class="address-section">
  
    <!-- 新增地址按钮 -->
    <view class="add-btn" bindtap="addNewAddress">
      新增
    </view>
  </view>
 
</t-popup>

期望结果

指示器应该显示出来，

t-popup+t-tabs ， t-tabs 套入 t-popup 底部指示器 track 显示不出来 ，单独使用 t-tabs 可以

实际结果

No response

基础库版本

No response

补充说明

[github-actions]

👋 @lianyu88888888，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[lianyu88888888]

这个是正常的

[lianyu88888888]

另外 设置 --td-tab-font-size 不生效，字体大小修改不了

[composable-tu]

能顺便贴一下 JS/TS 代码吗？t-tabs 与 t-popup 同时使用需要手动 track：

 <t-popup visible="{{visible}}" bind:visible-change="onVisibleChange">
  <!-- 在 t-tabs 添加 id="tabs" -->
  <t-tabs id="tabs" defaultValue="{{0}}" bind:change="onTabsChange" bind:click="onTabsClick" t-class="custom-tabs">
    <t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
    <!-- t-tab-panel 略 -->
  </t-tabs>
</t-popup>

Page({
  data: {
    visible: false
  },
  showPopup() {
    this.setData({
      visible: true
    }, () => {
      const tabs = this.selectComponent('tabs');

      tabs.setTrack(); // 这一步很重要，因为小程序的无法正确执行生命周期，所以需要手动设置下 tabs 的滑块
    })
  }
})

如果仍然不行，临时的解决方法是将 t-tabs 添加一个 wx:if="{{show}}"（和 t-popup 一致的 visible 参数），使其在弹出 t-popup 时才渲染 t-tabs。

[lianyu88888888]

address-sheet.zip

address-demo.zip

[lianyu88888888]

能顺便贴一下 JS/TS 代码吗？t-tabs 与 t-popup 同时使用需要手动 track：

标签一内容 Page({ data: { visible: false }, showPopup() { this.setData({ visible: true }, () => { const tabs = this.selectComponent('tabs');

  tabs.setTrack(); // 这一步很重要，因为小程序的无法正确执行生命周期，所以需要手动设置下 tabs 的滑块
})

}
})
如果仍然不行，临时的解决方法是将 t-tabs 添加一个 wx:if="{{show}}"（和 t-popup 一致的 visible 参数），使其在弹出 t-popup 时才渲染 t-tabs。

我上传了 代码 zip

[anlyyao]

@lianyu88888888 track的问题楼上 @composable-tu 已回复，请按照提示修改和使用， --td-tab-font-size 验证下来也是生效的， 如果还有其他问题，可重新开帖，重现链接建议使用 代码片段，如果只能使用zip，请压缩完整的项目，确保其他人能直接复现