小程序封装切换栏tab组件，实现点击tab样式随着选中切换动态变化

描述：小程序封装切换栏tab组件，实现点击tab样式随着选中切换动态变化

父组件传递选中index给子组件，子组件接收index，并设置index对应tab item为选中效果，通过:class动态添加act-bar类名。点击item改变index为item对应值，并改变tab选中效果样式

//父组件通过给子组件绑定index传递index属性值为active
v-model:index="active"
//子组件传递emits，返回改变后的index，改变父组件内定义的active值
const emit = defineEmits("update:index",index)
emit(['update:index'])

> .act-bar{
    transition: left .25s linear;//需要过渡的属性（全部属性是all），延迟时间，执行曲线
}

使用的是vue3的setup模块语法

拿到节点后通过left实现移动位置，但小横杠的最终位置始终和点击的tab不同。

let left = 0
onMounted(()=>{
    calcLeft();
})
function calcLeft(){
    uni.createSelectorQuery().select('#node').boundingClientRect(res => {
        let perWidth = res.width / props.list.length;
        left = perWidth * props.index + perWidth / 2 - 23;
    }).exec();
}
function switchEvt(index){
    emit('update:index',index);
    calcLeft()
}

先询问前辈后得到的结论是因为index的赋值是异步的，直接指向calcLeft会因为代码执行顺序先执行

但是尝试了setTimeout和nextTick都不行，还是有上述问题，而且小横杠初始位置也不在初始tab底下，明明已经在mounted生命周期中进行了初始化。然后尝试了放在onBeforeMount，onUpdated里，都不能解决。

function switchEvt(index){
    emit('update:index',index);
    setTimeout(()=>{
        calcLeft()
        //因为赋值是异步的，index还没更新好，所以不要改变定位的代码也要放在异步操作里
    },200)
    nextTick(()=>{
        calcLeft()
    })
}

最后看见left的初始值是0，且不能为生命周期里的改变，想着会不会是响应式的原因，将left定义为ref(0)，内部使用left改成left.value

let left = ref(0)
function calcLeft(){
    uni.createSelectorQuery().select('#node').boundingClientRect(res => {
        let perWidth = res.width / props.list.length;
        left.value = perWidth * props.index + perWidth / 2 - 23;
    }).exec();
}

执行成功，效果正确。