前端开发之使用纯CSS实现炫酷Tab切换

果展示

选中样式制作

将每个 tab 设置固定宽度。
每个tab 添加相对定位，居中，行高
添加伪类，伪类设置绝对定位，在底部。
设置伪类的宽度为 0%（伪类会继承该元素的宽度）
设置选中时候的伪类宽度为50%（视情况而定）
给元素添加过渡样式

HTML代码(wxml)

			
				{{item.name}}

CSS(less)：

		.nav-bar{
			position: relative;
			z-index: 10;
			height: 90upx;
			white-space: nowrap;
			background-color: #fbfbfb;
			
			.nav-item{
				display: inline-block;
				width: 150upx;
				height: 90upx;
				text-align: center;
				line-height: 90upx;
				font-size: 30upx;
				color: #a4a4a4;
				position: relative;
			}
			
			.current{
				color: #3f3f3f;
				font-weight: bold;
			}
		}

实现效果大致为这样的：

拓展

PS: 以上为纯CSS实现部分，如果项目 tab数量为通过接口动态获取的，可以适当加入一些 js 计算。

JS 思路：

获取当前选中的 tab 的宽度
获取当前选中 tab 以及它之前全部 tab 的宽度总和。
获取当前屏幕宽度
判断当前选中 tab 是否超过屏幕中心点（当前选中 tab 以及它之前全部 tab 的宽度总和 - 当前选中 tab 宽度/2）
移动当前 tabs 到屏幕的重心点位置

大致为（以微信小程序为例）：

				let width=0; // 当前选中选项卡及它之前的选项卡之和总宽度
				let nowWidth=0; // 当前选项卡的宽度
				//获取可滑动总宽度
				for (let i=0; i <=index; i++) {
					let result=await this.getElSize('tab' + i);
					width +=result.width;
					if(i===index){
						nowWidth=result.width;
					}
				}
				// console.log(width, nowWidth, windowWidth)
				//等待swiper动画结束再修改tabbar
				this.$nextTick(()=> {
					if (width - nowWidth/2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft=width - nowWidth/2 - windowWidth / 2;
						console.log(this.scrollLeft)
					}else{
						this.scrollLeft=0;
					}
					if(typeof e==='object'){
						this.tabCurrentIndex=index; 
					}
					this.tabCurrentIndex=index; 
				})

ps: getElSize() 函数代码为：

			getElSize(id) { 
				return new Promise((res, rej)=> {
					let el=uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data)=> {
						res(data);
					}).exec();
				});
			},

这样就可以实现动态 tab 切换了：

件

插件安装方式，ctrl+shift+p输入install packages

CSS3:支持CSS3里的语法高亮。(Sublime3里自带的CSS高亮不够用)。安装后, 打开一个CSS文件，然后按照下面GIF操作，将CSS3高亮作为CSS文件的默认高亮。

livestyle：调试后实时更新页面。安装这个还需要安装谷歌的插件。

Emmet:快速生成代码，用过h5build的应该知道。ul*li*3相当于:

<ul><li></li><li></li><li></li></ul>

记下语法就ok.

ConvertToUTF8：编码转utf8

CSScomb:css属性排序

html5：html规范包，输入html+tab生成html规范文档

Alignment：代码对齐，快捷键ctrl alt a

Autoprefixer插件:css3私有前缀自动补全插件

AutoFileName：自动完成文件名的输入，如图片选取，快捷输入文件名路径补全

less sass插件

JsFormat js格式化插件

Terminal 命令行插件

Minify 代码美化压缩插件

Color Highlighter 颜色选择插件

快捷键

Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本。

Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。举个栗子：快速选中并更改所有相同的变量名、函数名等。

Ctrl+L 选中整行，继续操作则继续选择下一行，效果和 Shift+↓ 效果一样。

Ctrl+Shift+L 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行。

Ctrl+Shift+M 选择括号内的内容（继续选择父括号）。举个栗子：快速选中删除函数中的代码，重写函数体代码或重写括号内里的内容。

Ctrl+M 光标移动至括号内结束或开始的位置。

Ctrl+Enter 在下一行插入新行。举个栗子：即使光标不在行尾，也能快速向下插入一行。

Ctrl+Shift+Enter 在上一行插入新行。举个栗子：即使光标不在行首，也能快速向上插入一行。

Ctrl+Shift+[ 选中代码，按下快捷键，折叠代码。

Ctrl+Shift+] 选中代码，按下快捷键，展开代码。

Ctrl+K+0 展开所有折叠代码。

Ctrl+← 向左单位性地移动光标，快速移动光标。

Ctrl+→ 向右单位性地移动光标，快速移动光标。

shift+↑ 向上选中多行。

shift+↓ 向下选中多行。

Shift+← 向左选中文本。

Shift+→ 向右选中文本。

Ctrl+Shift+← 向左单位性地选中文本。

Ctrl+Shift+→ 向右单位性地选中文本。

Ctrl+Shift+↑ 将光标所在行和上一行代码互换（将光标所在行插入到上一行之前）。

Ctrl+Shift+↓ 将光标所在行和下一行代码互换（将光标所在行插入到下一行之后）。

Ctrl+Alt+↑ 向上添加多行光标，可同时编辑多行。

Ctrl+Alt+↓ 向下添加多行光标，可同时编辑多行。

Ctrl+J 合并选中的多行代码为一行。举个栗子：将多行格式的CSS属性合并为一行。

Ctrl+Shift+D 复制光标所在整行，插入到下一行。

Tab 向右缩进。

Shift+Tab 向左缩进。

Ctrl+K+K 从光标处开始删除代码至行尾。

Ctrl+Shift+K 删除整行。

Ctrl+/ 注释单行。

Ctrl+Shift+/ 注释多行。

Ctrl+K+U 转换大写。

Ctrl+K+L 转换小写。

Ctrl+Z 撤销。

Ctrl+Y 恢复撤销。

Ctrl+U 软撤销，感觉和 Gtrl+Z 一样。

Ctrl+F2 设置书签

Ctrl+T 左右字母互换。

F6 单词检测拼写

Ctrl+F 打开底部搜索框，查找关键字。

Ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找，略高端，未研究。

Ctrl+P 打开搜索框。举个栗子：1、输入当前项目中的文件名，快速搜索文件，2、输入@和关键字，查找文件中函数名，3、输入：和数字，跳转到文件中该行代码，4、输入#和关键字，查找变量名。

Ctrl+G 打开搜索框，自动带：，输入数字跳转到该行代码。举个栗子：在页面代码比较长的文件中快速定位。

Ctrl+R 打开搜索框，自动带@，输入关键字，查找文件中的函数名。举个栗子：在函数较多的页面快速查找某个函数。

Ctrl+：打开搜索框，自动带#，输入关键字，查找文件中的变量名、属性名等。

Ctrl+Shift+P 打开命令框。场景栗子：打开命名框，输入关键字，调用sublime text或插件的功能，例如使用package安装插件。

Esc 退出光标多行选择，退出搜索框，命令框等。

Ctrl+Tab 按文件浏览过的顺序，切换当前窗口的标签页。

Ctrl+PageDown 向左切换当前窗口的标签页。

Ctrl+PageUp 向右切换当前窗口的标签页。

Alt+Shift+1 窗口分屏，恢复默认1屏（非小键盘的数字）

Alt+Shift+2 左右分屏-2列

Alt+Shift+3 左右分屏-3列

Alt+Shift+4 左右分屏-4列

Alt+Shift+5 等分4屏

Alt+Shift+8 垂直分屏-2屏

Alt+Shift+9 垂直分屏-3屏

Ctrl+K+B 开启/关闭侧边栏。

F11 全屏模式

Shift+F11 免打扰模式

蒙 ArkTS（HarmonyOS ArkTS）是适用于鸿蒙操作系统（HarmonyOS）的 TypeScript 开发框架。在鸿蒙 ArkTS 中实现动态添加 `tabcontent` 的功能，与在 Unity 中使用 ArkTS 的过程类似，都需要通过编程来控制用户界面的显示。

以下是一个基于鸿蒙 ArkTS 的简单示例，用于动态添加 `tabcontent`：

1. **定义Tab组件**：首先，你需要定义一个Tab组件，用于表示每个Tab页。这个组件应该包含所有你希望在Tab页上展示的内容。

2. **创建Tab容器**：在ArkTS中，你可以创建一个容器来管理所有的Tab页面。这个容器可以是一个简单的StackPanel或者Grid，用于排列所有的Tab内容。

3. **动态添加Tab内容**：通过编程的方式，你可以根据需要动态地创建Tab组件，并将其添加到Tab容器中。

下面是一个简化的ArkTS TypeScript示例代码，说明如何实现动态添加Tab内容的逻辑：

import { Component, Prop, h } from '@akeros/arkts';

@Component

export class TabContent extends HTMLElement {

@Prop() tabId: string;

@Prop() content: string;

constructor(private host: HTMLElement) {

super();

this.render();

}

render() {

this.innerHTML=`

<div class="tab-content">

<h2>${this.content}</h2>

</div>

`;

}

}

@Component

export class TabController extends HTMLElement {

private tabs: Map<string, TabContent>=new Map();

addTab(tabId: string, content: string) {

const tabContent=new TabContent(this.host);

tabContent.tabId=tabId;

tabContent.content=content;

this.tabs.set(tabId, tabContent);

this.host.appendChild(tabContent);

}

updateTab(tabId: string, newContent: string) {

const tabContent=this.tabs.get(tabId);

if (tabContent) {

tabContent.content=newContent;

tabContent.render();

}

}

removeTab(tabId: string) {

const tabContent=this.tabs.get(tabId);

if (tabContent) {

tabContent.remove();

this.tabs.delete(tabId);

}

}

}

在这个示例中，`TabContent` 组件用于表示单个Tab的内容，而 `TabController` 组件则负责管理所有的Tab页面。`addTab` 方法用于添加新的Tab内容，`updateTab` 方法用于更新现有Tab的内容，而 `removeTab` 方法则用于删除不再需要的Tab。

请注意，这个代码示例是一个简化的版本，用于说明如何在鸿蒙 ArkTS 中动态添加和更新Tab内容。在实际应用中，你可能需要根据具体的鸿蒙 ArkTS 版本和项目需求来调整代码。

在鸿蒙 ArkTS 项目中，你可以通过调用 `TabController` 组件的方法来动态地添加、更新或删除Tab内容，从而实现灵活的用户界面管理。

在线咨询

上一篇：表单设计中“星号（-）”的使用分析
下一篇：css3完成实用锯齿背景

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端开发之使用纯CSS实现炫酷Tab切换

果展示

选中样式制作

拓展

件

快捷键

您的项目需求