描述:小程序封装切换栏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();
}
执行成功,效果正确。