uniapp——nextTick(vue3)数据更新完之后加载

说明

将回调推迟到下一个 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;
		}
	}
}

样式

相关推荐
断墨先生19 分钟前
uniapp—android原生插件开发(3Android真机调试)
android·uni-app
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
阿伟来咯~7 小时前
一些 uniapp相关bug
uni-app·bug
瑶琴AI前端11 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen86811 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦19 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料1 天前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165022 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app