van-tabs组件底部下划线偏移问题

问题

van-tabs组件在首次加载的时候底部选中横条会出现偏移的情况，重新选择后会恢复原样。

解决方法

这是组件的问题，因为刚调用组件加载没有初始化过来。只需要加上延迟时间或者控制显示就可以了。

使用 wx:if ，然后在data里定义一个控制van-tab显示，触发重绘。

<van-tabs wx:if="{{resetTabs}}" id="typeTabs" active="{{ secondCatId }}" bind:change="onChange" color="#03BC90" title-active-color="#03BC90" style="width: 100%; " border="{{true}}">
  <van-tab wx:for="{{ catData }}" wx:key="item.id" title="{{item.name}}">
  </van-tab>
</van-tabs>

Page({
  data: {
    resetTabs: false
  },
  onShow: function (e) {
    let that = this
    setTimeout(() => { 
      that.setData({
        resetTabs: true
      })
    }, 100)
  },
})

注意定时器的时间设置长一点，比如设置10时间太短会不生效。