说明
将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。
代码
html
<view class="tabBox">
<scroll-view scroll-x="true" :scroll-with-animation="true">
<view class="box">
<!-- <block v-for="(item,index) in tabList" :key="index">
<view class="tabItem" v-if="(user.state.level =='parent') || (user.state.level =='substation' && item.id !== 1)"
:class="{'ac':tabCurrent == item.id}" @click="tabChange(item,index)">
{{item.name}}
</view>
</block> -->
<block v-for="(item,index) in tabList" :key="index">
<view class="tabItem" v-if="item.isShow" :class="{'ac':tabCurrent == item.id}"
@click="tabChange(item,index)">
{{item.name}}
</view>
</block>
</view>
</scroll-view>
</view>
javascript
onShow(() => {
common.getUserInfo();//更新个人信息
nextTick(() => {
setTimeout(() => { //加个延迟
// 初始化 tabList 和 tabCurrent
tabList.value.forEach((item, index) => {
if (index === 0) {
item.isShow = user.state.level == 'parent' ? true : false;
}
});
tabCurrent.value = user.state.level == 'parent' ? 1 : 2;
}, 200);
})
})
javascript
const tabList = ref([{
id: 1,
name: '模块1',
isShow: user.state.level == 'parent' ? true : false
}, {
id: 2,
name: '模块2',
isShow: true
}, {
id: 3,
name: '待接单',
isShow: true
}, {
id: 4,
name: '进行中',
isShow: true
}, {
id: 5,
name: '待验收',
isShow: true
}, {
id: 6,
name: '已完成',
isShow: true
}])
const tabCurrent = ref(user.state.level == 'parent' ? 1 : 2) //默认
function tabChange(item, index) {
tabCurrent.value = item.id
console.log(item.id);
}
css
.tabBox {
position: fixed;
width: 100%;
background: #ffffff;
/* 隐藏滚动条样式 */
::-webkit-scrollbar {
width: 0;
height: 0;
}
.box {
width: 900rpx;
margin: 0 24rpx;
display: flex;
align-items: center;
height: 100rpx;
.tabItem {
flex-shrink: 0;
display: inline-block;
padding: 15rpx 20rpx;
color: #636363;
font-size: 28rpx;
margin-right: 8px;
border-radius: 50rpx;
}
.ac {
background: #0D4CB6;
font-size: 28rpx;
color: #FFFFFF;
}
}
}