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

样式

相关推荐
web1508509664115 小时前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
何极光1 天前
uniapp小程序样式穿透
前端·小程序·uni-app
User_undefined2 天前
uniapp Native.js 调用安卓arr原生service
android·javascript·uni-app
流氓也是种气质 _Cookie2 天前
uniapp blob格式转换为video .mp4文件使用ffmpeg工具
ffmpeg·uni-app
爱笑的眼睛112 天前
uniapp 极速上手鸿蒙开发
华为·uni-app·harmonyos
鱼樱前端2 天前
uni-app框架核心/常用API梳理一(数据缓存)
前端·uni-app
阿琳a_2 天前
解决uniapp中使用axios在真机和模拟器下请求报错问题
前端·javascript·uni-app
三天不学习2 天前
uni-app 跨端开发精美开源UI框架推荐
ui·uni-app·开源
多客软件佳佳3 天前
便捷的线上游戏陪玩、线下家政预约以及语音陪聊服务怎么做?系统代码解析
前端·游戏·小程序·前端框架·uni-app·交友
洗发水很好用3 天前
uniApp上传文件踩坑日记
uni-app