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

样式

相关推荐
getyefang10 小时前
uniapp如何接入星火大模型
ai·uni-app
@PHARAOH10 小时前
WHAT - uni-app 条件编译技术
小程序·uni-app·条件编译
hunzi_112 小时前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
芭拉拉小魔仙15 小时前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
goto_w16 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
小宝小白16 小时前
【vue3】黑马小兔鲜儿项目uniapp navigationStyle
uni-app
Json____1 天前
uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景
uni-app·电脑·蓝牙·蓝牙信标 beacon·定位信标·停车场定位
web_Hsir1 天前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir1 天前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa2 天前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商