果展示

選中樣式制作

• 將每個 tab 設(shè)置固定寬度。
• 每個tab 添加相對定位，居中，行高
• 添加偽類，偽類設(shè)置絕對定位，在底部。
• 設(shè)置偽類的寬度為 0%（偽類會繼承該元素的寬度）
• 設(shè)置選中時候的偽類寬度為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;
			}
		}

實(shí)現(xiàn)效果大致為這樣的：

拓展

PS: 以上為純CSS實(shí)現(xiàn)部分，如果項(xiàng)目 tab數(shù)量 為通過接口動態(tài)獲取的，可以適當(dāng)加入一些 js 計(jì)算。

JS 思路：

• 獲取當(dāng)前選中的 tab 的寬度
• 獲取當(dāng)前選中 tab 以及它之前全部 tab 的寬度總和。
• 獲取當(dāng)前屏幕寬度
• 判斷當(dāng)前選中 tab 是否超過屏幕中心點(diǎn)（當(dāng)前選中 tab 以及它之前全部 tab 的寬度總和 - 當(dāng)前選中 tab 寬度/2）
• 移動當(dāng)前 tabs 到屏幕的重心點(diǎn)位置

大致為（以微信小程序?yàn)槔?/strong>

				let width = 0; // 當(dāng)前選中選項(xiàng)卡及它之前的選項(xiàng)卡之和總寬度
				let nowWidth = 0; // 當(dāng)前選項(xiàng)卡的寬度
				//獲取可滑動總寬度
				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動畫結(jié)束再修改tabbar
				this.$nextTick(() => {
					if (width - nowWidth/2 > windowWidth / 2) {
						//如果當(dāng)前項(xiàng)越過中心點(diǎn)，將其放在屏幕中心
						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() 函數(shù)代碼為：

			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();
				});
			},

這樣就可以實(shí)現(xiàn)動態(tài) tab 切換了：

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

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

/*定義滑塊 內(nèi)陰影+圓角*/ 
::-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 內(nèi)層軌道
• ::-webkit-scroll-thumb 滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決于是垂直滾動條還是水平滾動條）
• ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕
• ::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處