前端開發之使用純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 切換了：

天和大家分享如何修改radio樣式

效果

自定義顏色

自定義圖片

代碼

全部代碼直接可以運行，兼容性ie，火狐，谷歌

/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/ 
::-webkit-scrollbar 
{ 
 width: 4px; 
 height: 4px; 
 background-color: #F5F5F5; 
}

/*定義滾動條軌道 內陰影+圓角*/ 
::-webkit-scrollbar-track 
{ 
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 border-radius: 10px; 
 background-color: #FFF; 
}

/*定義滑塊 內陰影+圓角*/ 
::-webkit-scrollbar-thumb 
{ 
 border-radius: 10px; 
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
 background-color: #AAA; 
}

:-webkit-scrollbar 滾動條整體部分
::-webkit-scrollbar-track 滾動條的軌道（里面裝有Thumb）
::-webkit-scrollbar-track-piece 內層軌道
::-webkit-scroll-thumb 滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決于是垂直滾動條還是水平滾動條）
::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕
::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處

在線咨詢

上一篇：Web前端開發-CSS中偽類和偽元素
下一篇：10本計算機開源書籍精選

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端開發之使用純CSS實現炫酷Tab切換

果展示

選中樣式制作

拓展

效果

代碼

您的項目需求