uView2.0 Tabs组件滑块移位问题解决方案

问题描述

在使用uView2.0 Tabs组件时，当切换不同的标签页时，滑块的位置可能会发生移位，导致样式出现错乱的情况。这通常是由于组件内部计算滑块位置的逻辑导致的。

原因分析：
u-tabs组件在传入lineWidth 通过$u.addUnit转成了rpx单位如下代码：

:style="[{
        width: $u.addUnit(lineWidth),
        height: $u.addUnit(lineHeight),
        background: lineColor,
        backgroundSize: lineBgSize,
    }]"

在setLineLeft()方法里直接直接使用了lineWidth如果传入的值没带rpx单位或者带px单位滑块就会偏移

const lineWidth = uni.$u.getPx(this.lineWidth);

解决方案：
方法一：传值的时候带上rpx
建议全局配置：

// main.js
const $primary = '#006355'
uni.$u.setConfig({
      tabs: {
        lineHeight: '4rpx',
        lineWidth: '40rpx',
        lineColor:  $primary
      },
})

方法二：把tabs组件下方代码替换为

// const lineWidth = uni.$u.getPx(this.lineWidth);
const lineWidth = uni.$u.getPx(uni.$u.addUnit(this.lineWidth));`