tabs active动态改变的时候 底部横线会有bug

[coding-ice]

这个 Issue 涉及以下平台:

• 微信小程序
• 支付宝小程序
• 百度小程序
• 头条小程序
• 快手小程序
• QQ 轻应用
• Web 平台（H5）

BUG 描述
tabs下面的van-tabs__line位置计算错误
复现步骤
tabs中active，需要动态变化，比如从一个页面切换到指定的tab，（调用setState）横线会有错乱的情况，并且会闪烁
期望结果

实际结果

截图

环境

附加信息

function TabDemo({ children, className = '' }: IProps) {
  const cls = classNames(`tabDemo ${className}`)
  const [active, setActive] = useState('a')
  const router = useRouter().params

  useEffect(() => {
    setActive(router.tab)
  }, [])

  return (
    <TabDemoWrapper className={cls}>
      <Tabs
        active={active}
        onChange={(e) =>
          Toast.show({
            message: e.detail.name,
            selector: '#tabs-demo2',
          })
        }
      >
        <Tab title="标签 a" name="a">
          内容 a
        </Tab>
        <Tab title="标签 b" name="b">
          内容 b
        </Tab>
        <Tab title="标签 c" name="c">
          内容 c
        </Tab>
        <Toast id="tabs-demo2" />
      </Tabs>
    </TabDemoWrapper>
  )
}

[zuolung]

import { useState } from 'react'
import { View } from '@tarojs/components'
import { Tabs, Tab } from '@antmjs/vantui'

export default function Demo() {
  const [active, setActive] = useState('a')

  return (
    <View>
      <Tabs
        sticky={true}
        active={active}
        onChange={(e) => {
          console.info(e, '~~~~~~~')
          // setActive(e.detail.name || '')
        }}
      >
        <Tab title="标签 11" name="a">
          内容 1
        </Tab>
        <Tab title="标签 2" name="b">
          内容 2
        </Tab>
        <Tab title="标签 3" name="c">
          内容 3
        </Tab>
        <Tab title="标签 4" name="d">
          内容 4
        </Tab>
      </Tabs>
    </View>
  )
}

未复现，可以给下最小复现仓库吗

[coding-ice]

哈喽，上面有代码，比如我从A页面进入到B页面，B页面的active，是根据A页面的跳转的，router.params来的，如果不是第一个就会有问题～

[zuolung]

const router = useRouter().params
const [active, setActive] = useState(router.tab || 'a')

[coding-ice]

哈喽，这样写相当于默认值写成router.tab嘛，但是调用setState的时候会有问题，因为有些场景比如tabBar页面，页面不会被销毁，此时就需要调用setState，改变active就能浮现出来了，不知道我有没有描述清楚

[coding-ice]

// demo.tsx
import { memo, ReactNode } from 'react'
import { View, Text, Image, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'

interface IProps {
  children?: ReactNode
}

function Demo({ children }: IProps) {
  const handleClick = (url: string) => {
    Taro.navigateTo({
      url,
    })
  }

  return (
    <View>
      <Button onClick={() => handleClick('/pages/demo2/index?active=a')}>navigateTo a</Button>
      <Button onClick={() => handleClick('/pages/demo2/index?active=b')}>navigateTo b</Button>
    </View>
  )
}

export default memo(Demo)

// demo2
import { memo, ReactNode, useEffect, useState } from 'react'
import { View, Text, Image } from '@tarojs/components'
import { Tab, Tabs } from '@antmjs/vantui'
import { useRouter } from '@tarojs/taro'

interface IProps {
  className?: string
  children?: ReactNode
}

function Demo2({ children }: IProps) {
  const { active: tab } = useRouter().params
  const [active, setActive] = useState('a')

  useEffect(() => {
    setActive(tab!)
  }, [])

  return (
    <View>
      <Tabs active={active}>
        <Tab title="标签 a" name="a">
          内容 a
        </Tab>
        <Tab title="标签 b" name="b">
          内容 b
        </Tab>
      </Tabs>
    </View>
  )
}

export default memo(Demo2)

[coding-ice]

它这个情况是偶现的，点了退出进来多点几次就会出现了，有些奇怪，且横线会闪烁，比如tab跳到b，没有很平滑的划过来

[coding-ice]

@zuolung

[100cm]

const router = useRouter().params const [active, setActive] = useState(router.tab || 'a')

这个Tabbar不生效，不知道问题出在哪

[coding-ice]

没生效是啥意思 没太明白

[zuolung]

#601