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;
		}
	}
}

样式

相关推荐
山河故人1634 小时前
基于 SSE 和分块传输的 Uniapp 微信小程序 实现 流式传输 对话
微信小程序·小程序·uni-app
不老刘7 小时前
Uni-app网络请求AES加密解密实现
网络·uni-app
洪洪呀7 小时前
uni-app vue3 实现72小时倒计时功能
vue.js·uni-app
王哈哈的学习笔记21 小时前
uniapp小程序使用echarts
前端·小程序·uni-app
yrldjsbk21 小时前
uniapp小程序开发入门01-快速搭建一个空白的项目并预览它
uni-app
JavaDog程序狗1 天前
【实操】uniapp纯前端搞个识别植物花草小程序
前端·vue.js·uni-app
七七小报1 天前
uniapp-商城-42-shop 后台管理 分包
前端·uni-app
七七小报1 天前
uniapp-商城-40-shop 购物车 选好了 进行订单确认4 配送方式3 地址编辑
uni-app
xuanjiong1 天前
微信小程序,基于uni-app的轮播图制作,调用文件中图片
微信小程序·小程序·uni-app
flying robot1 天前
uniapp: 低功耗蓝牙(BLE)的使用
uni-app