各位开发者： 为方便微信开发者提前体验与调试微信新版本能力，欢迎开发者扫码加入体验 微信开发者版(安卓)（当前微信安卓版本需高于7.0.18），持续获得最新微信内测功能。 [图片] （使用安卓版微信扫描二维码加入体验） 微信团队 2020.08

项目中需要用到，所以自定义了一个，索性分享出来。（选中的tab居中有点问题） 效果截图： [图片] 源码如下 1.tabView.js [代码]// components/tabView/tabView.js Component({ /** * 组件的属性列表 */ properties: { tabs: { type: Array, value: ['充电', '租电', '换电', '购电', '蓄电池', '航空电池', '航空电池1', '航空电池2', '航空电池3', '航空电池4'], } }, /** * 组件的初始数据 */ data: { tabIndex: 0, //当前下标 lineLeft: 0, //指示器左边 lineWidth: 0, //指示器宽度 }, /** * 准备好 */ ready() { let that = this; that.queryView(this, '.tabView', (res) => { this.setData({ contentWidth: res.width, }) }) that.initTabIndex(this.data.tabIndex); }, /** * 组件的方法列表 */ methods: { /** * 初始化、设置tabIndex */ initTabIndex(index) { let that = this; that.queryView(that, '#tabItem_' + index, (res) => { let scrollLeft = 0; let lineLeft = 0; let lineWidth = (res.width - 40); //滑动时 if (that.data.tabs.length > 5) { that.queryScrollOffset(that, '.scrollView', (ress) => { scrollLeft = res.left + ress.scrollLeft - ((that.data.contentWidth - res.width) / 2); lineLeft = res.left + ress.scrollLeft + 20; that.setData({ lineWidth: lineWidth, lineLeft: lineLeft, scrollLeft: scrollLeft, tabIndex: index, }) }); } else { if (res.left < (that.data.contentWidth / 2)) { scrollLeft = 0; } else { scrollLeft = res.left - ((that.data.contentWidth - res.width) / 2); } lineLeft = res.left + 20; that.setData({ lineWidth: lineWidth, lineLeft: lineLeft, scrollLeft: scrollLeft, tabIndex: index, }) } }) }, //获取节点信息 queryView(context, name, success) { let query = wx.createSelectorQuery().in(context); query.select(name).boundingClientRect((res) => { success(res); }).exec(); }, //获取节点信息 queryScrollOffset(context, name, success) { let query = wx.createSelectorQuery().in(context); query.select(name).fields({ scrollOffset: true }, (res) => { success(res); }).exec(); }, /** * 点击tabItem */ clickItem(e) { let index = e.currentTarget.dataset.index; this.initTabIndex(index); this.triggerEvent('onChange',index); } } }) [代码] 2.tabView.wxml [代码]<!--components/tabView/tabView.wxml--> <view class="tabView"> <block wx:if='{{tabs.length > 5}}'> <scroll-view scroll-x class="scrollView" scroll-left='{{scrollLeft - 20}}' scroll-with-animation> <block wx:for='{{tabs}}' wx:key='index'> <view id="tabItem_{{index}}" class="tabItem {{index == tabIndex ? 'tabItem_active' : ''}}" bindtap="clickItem" data-index="{{index}}">{{item}}</view> </block> <view class="tabView_line" style="width:{{lineWidth}}px;left:{{lineLeft}}px;" /> </scroll-view> </block> <block wx:else> <block wx:for='{{tabs}}' wx:key='index'> <view id="tabItem_{{index}}" class="tabItem {{index == tabIndex ? 'tabItem_active' : ''}}" bindtap="clickItem" data-index="{{index}}">{{item}}</view> </block> <view class="tabView_line" style="width:{{lineWidth}}px;left:{{lineLeft}}px;" /> </block> </view> [代码] 3.tabView.wxss [代码]/* components/tabView/tabView.wxss */ .tabView { width: 100%; height: 88rpx; background: white; display: flex; flex-direction: row; align-items: center; justify-content: space-between; box-sizing: border-box; position: relative; } .scrollView { width: 100%; height: 100%; white-space: nowrap; position: relative; } .tabItem { width: auto; height: 100%; line-height: 88rpx; text-align: center; font-size: 32rpx; color: #333; box-sizing: border-box; padding: 0 40rpx; display: inline-block; } .tabItem_active { color: #00D29C; font-weight: bold; } .tabView_line { width: 100%; height: 4rpx; background: #00D29C; transition: left 200ms ease-in; position: absolute; top: 84rpx; left: 0; z-index: 9; } [代码]