{{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动画结束再修正tabbarthis.$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 切换了：
