项目中需要用到，所以自定义了一个，索性分享出来。（选中的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;
}