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

news2024/12/23 10:00:09

说明

将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。

代码

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

样式

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1498753.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

利用“定时执行专家”循环执行BAT、VBS、Python脚本——含参数指定功能

目录 一、软件概述 二、VBS脚本执行设置 三、触发器设置 四、功能亮点 五、总结 在自动化办公和日常计算机任务管理中&#xff0c;定时执行脚本是一项非常重要的功能。今天&#xff0c;我将为大家带来一款名为“定时执行专家”的软件的评测&#xff0c;特别是其定时执行VB…

leetCode刷题 5.最长回文子串

目录 1. 思路 2. 解题方法 3. 复杂度 4. Code 题目&#xff1a; 给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同&#xff0c;则该字符串称为回文字符串。 示例 1&#xff1a; 输入&#xff1a;s "babad" 输出&#x…

3.7 day2 Free RTOS

使用ADC采样光敏电阻数值&#xff0c;如何根据这个数值调节LED灯亮度。2.总结DMA空闲中断接收数据的使用方法 while (1){/* USER CODE END WHILE *//* USER CODE BEGIN 3 */adc_value HAL_ADC_GetValue(&hadc);TIM3->CCR3 adc_value * 999 / 4095;printf("%d …

Docker网络+原理+link+自定义网络

目录 一、理解Docker网络 1.1 运行tomcat容器 1.2 查看容器内部网络地址 1.3 测试连通性 二、原理 2.1 查看网卡信息 2.2 再启动一个容器测试网卡 2.3 测试tomcat01 和tomcat02是否可以ping通 2.4 只要删除容器,对应网桥一对就没了 2.5 结论 三、--link 3.…

探索考古文字场景,基于YOLOv7【tiny/l/x】不同系列参数模型开发构建文本考古场景下的甲骨文字符图像检测识别系统

甲骨文是一种非常历史悠久的古老文字&#xff0c;在前面我们基本上很少有涉及这块的内容&#xff0c;最近正好在做文字相关的项目开发研究&#xff0c;就想着基于甲骨文的场景来开发对应的检测识别系统&#xff0c;首先看下实例效果&#xff1a; YOLOv7是 YOLO 系列最新推出的Y…

dubbo3适配springboot2.7.3

版本详细 <dependency><groupId>org.apache.dubbo</groupId><artifactId>dubbo</artifactId><version>3.0.3</version> </dependency><parent><groupId>org.springframework.boot</groupId><artifactId&…

css 用flex做成田字型

哈喽&#xff0c;各位小伙伴&#xff01;今天给大家来css控制div完成田字型样式&#xff0c;来&#xff0c;看看下面的效果图&#xff1a; 一看就知道你们想要代码了&#xff0c;不急。代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head>&…

c++ 11 新特性 不同数据类型之间转换函数之reinterpret_cast

一.不同数据类型之间转换函数reinterpret_cast介绍 reinterpret_cast是C中的一种类型转换操作符&#xff0c;用于执行低级别的位模式转换。具体来说&#xff0c;reinterpret_cast可以实现以下功能&#xff1a; 指针和整数之间的转换&#xff1a;这种转换通常用于在指针中存储额…

【考研数学】武忠祥各阶段用书搭配+学习包

25考研数学全流程规划&#xff01;别等到二战了才知道这样学 本人属于基础很差相当于是零基础的考研党&#xff0c;经过一年备考成功上岸 中间花费了很多时间在考研数学备考信息检索上&#xff0c;写下这篇希望能帮助基础不好的学弟学妹们多节约一些时间复习&#xff01; 25…

容器+虚拟机双引擎,ZStack Edge云原生超融合打通业务最后一公里

企业数字化转型的焦点正在发生变化&#xff0c;云基础设施由资源到应用&#xff0c;数据中心从核心到边缘。面向云原生趋势&#xff0c;围绕应用升级&#xff0c;新一代超融合产品——云原生超融合应运而生。 云原生与边缘计算趋势催生云原生超融合 当前&#xff0c;企业客户…

【CSP试题回顾】201409-3-字符串匹配

CSP-201409-3-字符串匹配 关键点&#xff1a;<string>库函数的使用 length() 或 size(): 返回字符串的长度。 empty(): 检查字符串是否为空。 append() 或 : 向字符串的末尾添加字符或另一个字符串。 insert()在字符串的指定位置插入另一个字符串或字符。 std::str…

Docker-容器网络互联

目录 1 前言 2 常用指令 3 实现容器互联 3.1 自定义网络 3.2 让容器连接创建的网络 3.2.1 容器创建后连接网络 3.2.2 容器创建时连接网络 3.3 尝试使用容器名访问(测试) 1 前言 在默认情况下&#xff0c;docker中的容器都是连接到一个虚拟的网桥上的&#xff0c;这为独…

web服务之虚拟主机功能

华子目录 概述基于IP地址的虚拟原理实验 基于不同端口号的虚拟主机原理实验 基于域名的虚拟主机原理域名解析实验 概述 如果每台运行 Linux 系统的服务器上只能运行一个网站&#xff0c;那么人气低、流量小的草根站长就要被迫承担着高昂的服务器租赁费用了&#xff0c;这显然也…

使用Python制作自己的wheel文件

平时自己利用Python制作一个个小工具后想分享给别人&#xff0c;但又嫌分享一堆项目代码很麻烦&#xff0c;那么你可以考虑将自己的项目打包成一个wheel文件&#xff0c;别人拿到文件后只需pip install安装即可使用&#xff0c;非常方便。 在上一篇博文中&#xff0c;利用nvid…

01、python_爬虫的相关概念

一、什么是爬虫&#xff1f; 爬虫是网络爬虫的简称&#xff0c;指的是一种自动化程序&#xff0c;用于在互联网上抓取信息。爬虫的核心工作包括爬取网页、解析数据和存储数据。 通俗来说就是&#xff1a;通过一个程序&#xff0c;根据url(http://taobao.com)进行爬取网页&…

第九届多媒体系统和信号处理国际会议(ICMSSP 2024)即将召开!

2024年第九届多媒体系统和信号处理国际会议&#xff08;ICMSSP 2024&#xff09;将在5月24-26日在泰国曼谷举行。ICMSSP 2024旨在展示多媒体系统和信号处理等相关主题的最新研究和成果&#xff0c;为不同领域的专家代表提供了面对面交流新想法以及应用经验的机会&#xff0c;建…

从零搭建React18.2+ReactRoute6.22+TS5+RTK2.2搭配antd5+antd-style书写All in Js完整体验项目规范

1. 使用CRA创建项目 全局设置npm淘宝镜像源 npm config set registry https://registry.npmmirror.com -g使用最新版create-react-app初始化项目结构 npx create-react-app custom-template --template typescript初始化项目之后在package.json文件中配置使用node>18.0.0…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:CalendarPicker)

日历选择器组件&#xff0c;提供下拉日历弹窗&#xff0c;可以让用户选择日期。 说明&#xff1a; 该组件从API Version 10开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 CalendarPicker(options?: CalendarOptions) …

构建读写分离的数据库集群

目录 1. 基础环境配置 &#xff08;1&#xff09;修改主机名 &#xff08;2&#xff09;编辑hosts文件 &#xff08;3&#xff09;配置Yum安装源 &#xff08;4&#xff09;安装JDK环境 2. 部署MariaDB主从数据库集群服务 &#xff08;1&#xff09;安装MariaDB服务 &a…

用readproc函数读取进程的状态

概要&#xff1a; 本篇演示用readproc函数读取进程的状态 libprocps库的安装参考笔者的文章readproc.h-CSDN博客 演示所用的系统是Ubuntu22.04 一、代码 #include<stdio.h> #include<stdlib.h> #include<proc/readproc.h> int main() {struct PROCTAB *…