[Tab选项卡] 初始化显示, 第一个tab的高亮下划线的定位偏移量错误, 经过手动切换tab后下划线的位置会恢复正常

[zhelingwang]

tdesign-miniprogram 版本

"tdesign-miniprogram": "^1.0.0"

重现链接

https://tdesign.tencent.com/miniprogram/components/tabs?tab=demo

重现步骤

我看官网首页第一个示例就可以复现, 是同样的问题

期望结果

下划线初始显示位置正常居中

实际结果

下划线初始显示位置偏左

基础库版本

2.23.1

补充说明

如图

[github-actions]

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

[anlyyao]

官网我这边看着是这样的：

直接贴你的代码 👀 ？ 包括css 那部分～

[zhelingwang]

<view class="home-page-container">
  <view class="home-page-tabs">
    <t-tabs t-class="t-tabs" t-class-active="tabs-external__active" t-class-item="tabs-external__item" defaultValue="{{0}}" space-evenly="{{false}}" bind:change="tabChangeHandle" swipeable="{{true}}" sticky="{{true}}">
      <t-tab-panel wx:key="0" label="{{tabList[0].text || ''}}" value="{{tabList[0].key}}">
        <text class="topTips">饭来张口~免费配送. 有空堂食, 没空机器人派送上楼. </text>
        <view class="goodsList">
          <goods-list-new data-id="1" bindtap="navToActivityDetail" data="{{ tabEatList[0] }}" />
          <goods-list-new bindtap="navToActivityDetail" data="{{ tabEatList[1] }}" />
          <goods-list-new bindtap="navToActivityDetail" data="{{ tabEatList[2] }}" />
        </view>
      </t-tab-panel>

      <t-tab-panel wx:key="1" label="{{tabList[1].text || ''}}" value="{{tabList[1].key}}">
        <text class="topTips">楼内下午茶+小骑手</text>
        <view class="goodsList">
          <goods-list-new data="{{ tabDrinkList[0] }}" />
          <goods-list-new data="{{ tabDrinkList[1] }}" />
        </view>
      </t-tab-panel>

      <t-tab-panel wx:key="2" label="{{tabList[2].text || ''}}" value="{{tabList[2].key}}">
        <text class="topTips">外卖闪送 todo </text>
      </t-tab-panel>
    </t-tabs>

  </view>
</view>

css部分:

.home-page-container .t-tabs {
  background: #f4f8ff !important;
}

.home-page-container .t-tabs .t-tabs-nav {
  background-color: transparent;
  line-height: 80rpx;
  font-size: 28rpx;
  color: #333;
}

.home-page-container .t-tabs .t-tabs-scroll {
  border: none !important;
}

/* 半个字 */
.home-page-container .tab.order-nav .order-nav-item.scroll-width {
  min-width: 165rpx;
}
.home-page-container .tab .order-nav-item.active {
  color: #fa550f !important;
}

.home-page-container .tab .bottom-line {
  border-radius: 4rpx;
}

.home-page-container .tab .order-nav-item.active .bottom-line {
  background-color: #fa550f !important;
}

.home-page-container .tabs-external__item {
  /* color: #666 !important; */
  font-size: 28rpx;
  background-color: #f4f8ff !important;
}

.home-page-container .tabs-external__active {
  color: #333333 !important;
  font-size: 32rpx;
}

.home-page-container .tabs-external__track {
  /* background-color: #fa4126 !important; */
  height: 6rpx !important;
  border-radius: 4rpx !important;
  width: 48rpx !important;
}

.t-tabs.t-tabs--top .t-tabs__item,
.t-tabs.t-tabs--bottom .t-tabs__item {
  height: 86rpx !important;
}
.t-tabs__nav--top {
  background-color: #f4f8ff !important;
  width: 100%;
}


.home-page-container .goods-list-container {
  background: #f5f5f5 !important;
  margin-top: 16rpx;
}

.home-page-tabs {
  --td-tab-nav-bg-color: transparent;
  --td-tab-border-color: transparent;
  --td-tab-item-color: #666;
  --td-tab-track-color: #41b881;
}

[zhelingwang]

官网我这边看着是这样的：

直接贴你的代码 👀 ？ 包括css 那部分～

我这边的官网刷新第一次进来是有问题, chrome浏览器, 代码在上面贴了

[anlyyao]

我先给你录屏看看官网上的一个整体表现，中间的动画是符合预期的（官网和真机表现一致）：

2024-06-06.15.31.22.mov

[anlyyao]

我先给你录屏看看官网上的一个整体表现，中间的动画是符合预期的（官网和真机表现一致）：

2024-06-06.15.31.22.mov

然后我copy你的代码看看，稍等给你反馈～

[anlyyao]

@zhelingwang 感觉你可能和 #2793 是同一个问题🤔，该问题已修复，明天发版本会带上，辛苦明天更新版本再试试

[anlyyao]

duplicate #2793

[zhelingwang]

@zhelingwang 感觉你可能和 #2793 是同一个问题🤔，该问题已修复，明天发版本会带上，辛苦明天更新版本再试试

好的, 谢谢, 辛苦啦

[anlyyao]

@zhelingwang 感觉你可能和 #2793 是同一个问题🤔，该问题已修复，明天发版本会带上，辛苦明天更新版本再试试

好的, 谢谢, 辛苦啦

已发布1.4.2，辛苦更新版本试试，如果还有问题，可以继续反馈～

[anlyyao]

@zhelingwang 更新版本后有重新构建吗？

1.4.2版本未能复现你的问题。这里有一个代码片段，你在本地运行试试 https://developers.weixin.qq.com/s/t2a4ETme7KRx

[zhelingwang]

@zhelingwang 感觉你可能和 #2793 是同一个问题🤔，该问题已修复，明天发版本会带上，辛苦明天更新版本再试试

好的, 谢谢, 辛苦啦

已发布1.4.2，辛苦更新版本试试，如果还有问题，可以继续反馈～

我对页面代码进行了缩减, t-tab-panel 的 label 属性中注入变量时重新编译就会复现, 感觉像是label的值影响了宽度, 进而初始化计算偏移时有误

[anlyyao]

@zhelingwang 感觉你可能和 #2793 是同一个问题🤔，该问题已修复，明天发版本会带上，辛苦明天更新版本再试试

好的, 谢谢, 辛苦啦

已发布1.4.2，辛苦更新版本试试，如果还有问题，可以继续反馈～

我对页面代码进行了缩减, t-tab-panel 的 label 属性中注入变量时重新编译就会复现, 感觉像是label的值影响了宽度, 进而初始化计算偏移时有误

提供一个可复现代码片段？？我来看看🤔

[anlyyao]

@zhelingwang 你之前贴的代码， 缺了js部分？ 请确保我能本地运行你的代码片段～

[zhelingwang]

@anlyyao 我先试试你上面提供的代码片段能不能复现

[zhelingwang]

@anlyyao 找到原因了, 升级后的组件本身没有问题的

[anlyyao]

@anlyyao 找到原因了, 升级后的组件本身没有问题的

😠 问题是啥？

[zhelingwang]

@anlyyao 找到原因了, 升级后的组件本身没有问题的

😠 问题是啥？

加个 pageLoading 判断数据是否已返回即可, 问题就解决了, 这么看的化原因应该是初始化所应用的数据源为空导致的问题.
然后我又回退到版本 1.4.1 好像也没有复现了, 和 #2793 应该不是一个问题

[anlyyao]

@zhelingwang 感谢反馈，确实和 2793 不是同一个问题。我稍微优化了一下，支持动态 label， 后面可以再试试新版本～

[zhelingwang]

@zhelingwang 感谢反馈，确实和 2793 不是同一个问题。我稍微优化了一下，支持动态 label， 后面可以再试试新版本～

Nice