当前位置: 首页 > news >正文

uniapp u-tabs表单如何默认选中

首先先了解该组件;该组件,是一个tabs标签组件,在标签多的时候,可以配置为左右滑动,标签少的时候,可以禁止滑动。 该组件的一个特点是配置为滚动模式时,激活的tab会自动移动到组件的中间位置。

基本使用:

  • 通过设置scrollable(默认为true),配置tabs组件的内容是否可以左右拖动,一般4个标签以下时,无需拖动,设置为false,5个标签以上,建议可以左右拖动。
  • tabs标签的切换,需要绑定current值,在change事件回调中可以得到index,将其赋值给current即可。

说明

scrollable参数很重要,如果您的tabs项只有几个,且不想tabs导航栏可以被左右滑动的话,请一定要设置scrollablefalse,因为它默认为true

先看一个示例代码

<template><u-tabs :list="list1" @click="click"></u-tabs>
</template><script>export default {data() {return {list1: [{name: '关注',}, {name: '推荐',}, {name: '电影'}, {name: '科技'}, {name: '音乐'}, {name: '美食'}, {name: '文化'}, {name: '财经'}, {name: '手工'}]}},methods: {click(item) {console.log('item', item);}}}
</script>

效果如下

但如果想默认选中其中一个该如何设置呢?

只需要添加一个关键属性;

首先在return中声明一个变量:activeIndex:3       ;然后在点击事件里触发

this.activeIndex = item.index;

注:绑定属性的关键字为current 而不是active;如此便可实现

下面是效果

部分重要代码如下:

		<u-tabs :list="list1" :current="activeIndex" @click="click"></u-tabs>
				activeIndex: 0, // 默认选中第2个标签页
async click(item) {this.activeIndex = item.index;
}

希望对你有所帮助

相关文章:

uniapp u-tabs表单如何默认选中

首先先了解该组件&#xff1b;该组件&#xff0c;是一个tabs标签组件&#xff0c;在标签多的时候&#xff0c;可以配置为左右滑动&#xff0c;标签少的时候&#xff0c;可以禁止滑动。 该组件的一个特点是配置为滚动模式时&#xff0c;激活的tab会自动移动到组件的中间位置。 …...

2023年腾讯云双11活动入口在哪里?

2023年双11腾讯云推出了11.11大促优惠活动&#xff0c;下面给大家分享腾讯云双11活动入口、活动时间、活动详情&#xff0c;希望可以助力大家轻松上云&#xff01; 一、腾讯云双11活动入口 活动地址&#xff1a;点此直达 二、腾讯云双11活动时间 腾讯云双11活动时间跨度很长…...

Windows 下编译 TensorFlow 2.12.0 CC库

大体参考 Windows 下编译 TensorFlow 2.9.1 CC库-CSDN博客 这个版本不完整&#xff0c;需要从 TensorFlow 2.14.0 根目录复制 WORKSPACE 覆盖原同名文件&#xff0c;还需要复制TensorFlow 2.14.0 的 tensorflow\tools\toolchains\python 到相同目录。...

Spring Boot 中自动装配机制的原理

&#xff08;摘自mic老师面试题&#xff09; 最近一个粉丝说&#xff0c;他面试了 4 个公司&#xff0c;有三个公司问他&#xff1a;“Spring Boot 中自动装配 机制的原理” 他回答了&#xff0c;感觉没回答错误&#xff0c;但是怎么就没给 offer 呢&#xff1f; 对于这个问题…...

如何安装Wnmp并结合内网穿透实现外网访问内网Wnmp服务

文章目录 前言1.Wnmp下载安装2.Wnmp设置3.安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4.固定公网地址访问 前言 WNMP是Windows系统下的绿色NginxMysqlPHP环境集成套件包&#xff0c;安装完成后即可得到一个Nginx MyS…...

网工内推 | 上市公司,云平台运维,IP认证优先,13薪

01 上海新炬网络信息技术股份有限公司 招聘岗位&#xff1a;云平台运维工程师 职责描述&#xff1a; 1、负责云平台运维&#xff0c;包括例行巡检、版本发布、问题及故障处理、平台重保等&#xff0c;保障平台全年稳定运行&#xff1b; 2、参与制定运维标准规范与流程&#x…...

Linux安装DMETL4

Linux安装DMETL4 产品与环境介绍1 规划安装路径2 DM8安装路径2.1 达梦数据库程序安装路径2.2 初始化达梦数据库2.3 创建数据库用户名 DMETL 3 安装DMETL3.1 查看安装包与授权3.2 安装DMETL程序3.3 DMETL安装日志 4 启动DMETL5 DMETL连接数据库后会自动创建相关资源表6 达梦数据…...

Python中编码声明的方法

编码声明主要是为了解决编码问题。由于Python 3的默认编码是UTF-8&#xff0c;因此在使用Python 3编写源代码时&#xff0c;通常不需要在文件开头添加编码声明。但是&#xff0c;如果您使用的编码不是UTF-8&#xff0c;则需要在文件开头添加编码声明&#xff0c;以确保Python解…...

css设置浏览器表单自动填充时的背景

浏览器自动填充表单内容&#xff0c;会自动设置背景色。对于一般的用户&#xff0c;也许不会觉得有什么&#xff0c;但对于要求比较严格的用户&#xff0c;就会“指手画脚”。这里&#xff0c;我们通过css属性来设置浏览器填充背景的过渡时间&#xff0c;使用户看不到过渡后的背…...

windows系统下查看安卓apk的sha1

1.在apk所在文件夹打开cmd或者powershell 2.输入 certutil -hashfile xxx.apk SHA1 这样就可以了 3.指令格式 certutil -hashfile FileName [HashAlgorithm] certutil -hashfile&#xff1a;原样输入 FileName&#xff1a;文件名 HashAlgorithm&#xff1a;可选项包括&…...

openGauss学习笔记-116 openGauss 数据库管理-设置数据库审计-审计概述

文章目录 openGauss学习笔记-116 openGauss 数据库管理-设置数据库审计-审计概述116.1 背景信息116.2 操作步骤 openGauss学习笔记-116 openGauss 数据库管理-设置数据库审计-审计概述 116.1 背景信息 数据库安全对数据库系统来说至关重要。openGauss将用户对数据库的所有操作…...

python编程复习系列——week2(Input Output (2))

文章目录 一、多行代码语句二、Escape序列三、字符串格式四、数值运算课后作业 一、多行代码语句 &#x1f95e;使用反斜杠\来表示在下一行中继续使用一条语句。 subject_code "CSCI111" subject_mark 80 subject_grade "D" result "Subject re…...

为什么HTTP用得很好的,开始普及HTTPS呢?

显而易见&#xff0c;现在的HTTP早已不安全&#xff0c;当我们在浏览各个网站时会发现HTTP前面都会显示不安全&#xff0c;因为HTTP是明文传输&#xff0c;一旦电脑被植入了木马&#xff0c;木马程序就会主动周期性发消息给Internet的控制终端&#xff0c;这样NAT小洞会一直敞开…...

C++day6作业

1.思维导图 2.编程题&#xff1a; 以下是一个简单的比喻&#xff0c;将多态概念与生活中的实际情况相联系&#xff1a; 比喻&#xff1a;动物园的讲解员和动物表演 想象一下你去了一家动物园&#xff0c;看到了许多不同种类的动物&#xff0c;如狮子、大象、猴子等。现在&am…...

【 毕设项目源码推荐 javaweb 项目】 基于 springboot+vue 的图书个性化推荐系统的设计与实现(springboot003)

简介 :::warning 【 毕设项目源码推荐 javaweb 项目】 基于 springbootvue 的图书个性化推荐系统的设计与实现适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负…...

FFmpeg编译hevc版本,支持mac、linux系统

相关前置库 openssl 仓库&#xff1a;https://github.com/openssl/openssl.git编译方式参考INSTALL.md中的步骤 # Unix / Linux / macOS$ ./config$ make && sudo make installlame库 如果需要处理mp3相关&#xff0c;依赖lame库&#xff0c; 仓库&#xff1a;https…...

AI系统ChatGPT程序源码+AI绘画系统源码+支持GPT4.0+Midjourney绘画+已支持OpenAI GPT全模型+国内AI全模型

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…...

Unity 3D 调整cube的颜色

1.选中Assets后&#xff0c;右键->Create->Material 2.调整Material的颜色&#xff0c;然后将Material拖到对应的cube上...

数字通信和fpga概述——杜勇版本学习笔记

1数字通信处理流程 脉冲调制是每个数字通信系统中间必不可少的环节&#xff0c;通常是使用升余弦滚降滤波器来实现。 超外差接收机原理是利用本地产生的振荡波与输入信号混频&#xff0c;将输入信号频率变换为某个预先确定的频率的方法。超外差原理最早是由E.H.阿姆斯特朗于1…...

17.复制字符串 ,包括\0

#include<stdio.h> #include <cstring>int main(){int len1,len2;char s1[44];char s2[33];scanf("%s",s1);scanf("%s",s2);len1strlen(s1)1;printf("先s1的字符长度为&#xff1a;%d\n",len1) ;strcpy(s1,s2) ;printf("复制字…...

3分钟解锁PDF宝藏:Python pdftotext终极文本提取指南

3分钟解锁PDF宝藏&#xff1a;Python pdftotext终极文本提取指南 【免费下载链接】pdftotext Simple PDF text extraction 项目地址: https://gitcode.com/gh_mirrors/pd/pdftotext 在日常办公和数据处理中&#xff0c;PDF文档就像一座座信息宝库&#xff0c;但如何快速…...

3D打印Cherry MX键帽:从设计到制造的完整开源方案

3D打印Cherry MX键帽&#xff1a;从设计到制造的完整开源方案 【免费下载链接】cherry-mx-keycaps 3D models of Chery MX keycaps 项目地址: https://gitcode.com/gh_mirrors/ch/cherry-mx-keycaps 你是否曾经为找不到特殊尺寸的键帽而烦恼&#xff1f;或者想为自己的机…...

小型语言模型在硬件设计中的高效应用与优化

1. 小型语言模型在硬件设计中的崛起 在半导体行业&#xff0c;AI辅助设计流程正面临着一个关键的可持续发展挑战。当前业界越来越依赖AI来提升生产力&#xff0c;但基于大型语言模型(LLM)的设计自动化带来了巨大的成本负担。以GPT-4为例&#xff0c;每处理1K个token需要消耗0.0…...

终极Blender 3MF插件:从数字设计到3D打印的无缝转换指南

终极Blender 3MF插件&#xff1a;从数字设计到3D打印的无缝转换指南 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 在3D打印工作流中&#xff0c;你是否经常遇到格式转换…...

FanControl中文配置终极指南:5分钟让Windows风扇控制软件说中文

FanControl中文配置终极指南&#xff1a;5分钟让Windows风扇控制软件说中文 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Tr…...

2024机器学习就业趋势与高薪技能解析

1. 2024年机器学习行业薪资与就业市场全景分析过去三年我持续追踪全球ML工程师的薪资数据&#xff0c;发现这个领域正经历着从野蛮生长到理性发展的关键转折。2024年的机器学习就业市场呈现出明显的"两极分化"特征&#xff1a;初级岗位竞争白热化&#xff0c;而具备3…...

构建终身学习LLM智能体:从记忆架构到工程实践

1. 项目概述&#xff1a;当LLM学会“终身学习”最近在GitHub上看到一个项目&#xff0c;叫“awesome-lifelong-llm-agent”&#xff0c;第一眼就被这个标题吸引了。作为一个在AI和智能体领域摸爬滚打多年的从业者&#xff0c;我深知“终身学习”这四个字对于当前的大语言模型&a…...

Outfit字体:品牌设计自动化的5个核心技术优势与3种跨平台应用方案

Outfit字体&#xff1a;品牌设计自动化的5个核心技术优势与3种跨平台应用方案 【免费下载链接】Outfit-Fonts The most on-brand typeface 项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts Outfit字体作为一款专为品牌自动化设计的几何无衬线字体&#xff0c…...

10分钟轻松搞定网易云音乐NCM文件转换:小白也能上手的终极指南

10分钟轻松搞定网易云音乐NCM文件转换&#xff1a;小白也能上手的终极指南 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾经在网易云音乐下载了喜欢的…...

创意表达与技术实现:Arcade-plus如何重塑音乐游戏谱面创作范式

创意表达与技术实现&#xff1a;Arcade-plus如何重塑音乐游戏谱面创作范式 【免费下载链接】Arcade-plus A better utility used to edit and preview aff files 项目地址: https://gitcode.com/gh_mirrors/ar/Arcade-plus Arcade-plus不仅是一个谱面编辑器&#xff0c;…...