效果展示选中样式制作将每个 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 切换了：