yihuo/components/tabbar4.vue

<template>
    <view class="tabs" :class="[customClass]">
        <view v-if="tabs.length <= 4" class="flex-align">
            <view
                v-for="item in tabs"
                :key="item.value"
                class="cell flex-align-around"
                :class="{ active: tab.value === item.value }"
                @click="clickTab(item)"
            >
                {{ item.title }}
            </view>
        </view>
        <scroll-view
            v-else
            scroll-x
            class="scroll-content"
            :scroll-left="scrollLeft"
            :scroll-with-animation="true"
        >
            <view
                v-for="(item, index) in tabs"
                :key="item.value"
                class="cell"
                :class="{ active: tab.value === item.value }"
                @click="clickTab(item, index)"
            >
                {{ item.title }}
            </view>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        props: {
            tabs: Array,
            initial: {
                default: 0,
                type: Number
            },
            customClass: {
                default: '',
                type: String
            }
        },
        data() {
            return {
                tab: this.tabs[this.initial],
                scrollLeft: 0,
                scrollW: 0,
                sizeWidth: []
            }
        },
        mounted() {
            if (this.scrollLeft <= 0 && this.tabs.length > 4) {
                this.getScrollW()
            }
        },
        methods: {
            getScrollW() {
                const query = uni.createSelectorQuery().in(this)
                query
                    .select('.scroll-content')
                    .boundingClientRect((data) => {
                        this.scrollW = data.width
                    })
                    .exec()

                query
                    .selectAll('.cell')
                    .boundingClientRect((data) => {
                        let dataLen = data.length
                        for (let i = 0; i < dataLen; i++) {
                            this.sizeWidth[i] = {
                                left: data[i].left,
                                width: data[i].width
                            }
                        }
                    })
                    .exec()
            },
            clickTab(item, index) {
                if (this.tab.value == item.value) return
                this.tab = item
                this.$emit('change', item)
                if (index) {
                    this.scrollLeft =
                        this.sizeWidth[index].left -
                        this.scrollW / 2 +
                        this.sizeWidth[index].width / 2
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .tabs {
        height: 56rpx;
        .cell {
            height: 100%;
            width: 128rpx;
            position: relative;
            display: inline-block;
            font-size: 24rpx;
            color: #999999;

            background: #f3f3f8;
            border-radius: 24rpx 24rpx 0 0;
            text-align: center;
            line-height: 56rpx;
            &.active {
                color: #000;
                background-color: #fff;
            }
        }
    }
    .scroll-content {
        position: relative;
        height: 56rpx;
        white-space: nowrap;
        width: 100%;
        .cell {
            height: 100%;
            width: 128rpx;
            position: relative;
            display: inline-block;
            font-size: 24rpx;
            color: #999999;
            text-align: center;
            line-height: 56rpx;
            background: #f3f3f8;
            border-radius: 24rpx 24rpx 0 0;
            &.active {
                color: #000;
                background-color: #fff;
            }
        }
    }
</style>