效果展示

选中样式制作

• 将每个 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 切换了：