sooka_consult_uniapp/components/tabs/tabs.vue

<template>
    <!-- components/tabs/tabs.wxml -->
    <view class="tabs tab-class">
        <view class="tabs-header tab-header-class">
            <view class="tabs-header-content">
                <view class="tabs-item tab-item-class" @tap="selectIndexFun" :data-index="index" v-for="(item, index) in list" :key="index">
                    <view class="tabs-item-name tab-item-name-class" :style="'color: ' + (currentClone == index ? activeColor : normalColor) + ';'">{{ item.name }}</view>

                    <view :style="'width: 100%;height:10rpx;display: block; background: ' + (currentClone == index ? activeColor : '#FFFFFF00') + ';border-radius: 4rpx;'"></view>

                    <view class="tabs-item-badge tab-item-badge-class" v-if="showBadge && item.count > 0">{{ item.count }}</view>
                </view>
            </view>
        </view>
        <swiper class="tabs-page tab-page-class" :current="currentClone" :circular="circular" @change="swiperChangeFun">
            <swiper-item @touchmove.stop.prevent="parseEventDynamicCode($event, swiper ? '' : '_onTouchMove')" v-for="(item, index) in list" :key="index">
                <slot :name="item.name"></slot>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
// components/tabs/tabs.js
export default {
    unicomGroup: ['tab-page'],
    data() {
        return {
            currentClone: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        list: {
            type: Array,
            default: () => []
        },
        current: {
            type: Number,
            default: 0
        },
        normalColor: {
            type: String,
            default: '#101010'
        },
        activeColor: {
            type: String,
            default: '#55b428'
        },
        showBadge: {
            type: Boolean,
            default: true
        },
        circular: {
            type: Boolean,
            default: true
        },
        swiper: {
            type: Boolean,
            default: false
        }
    },
    relations: {
        '../tab-page/tab-page': {
            type: 'child'
        }
    },
    options: {
        multipleSlots: true
    },
    externalClasses: ['tab-class', 'tab-header-class', 'tab-item-class', 'tab-item-name-class', 'tab-item-badge-class', 'tab-page-class'],
    /**
     * 组件的方法列表
     */
    methods: {
        selectIndexFun: function (e) {
          this.currentClone = e.currentTarget.dataset.index
            this.$emit('change', {
                detail: {
                    current: e.currentTarget.dataset.index
                }
            });
        },
        swiperChangeFun: function (e) {
                this.currentClone = e.detail.current
            this.$emit('change', {
                detail: {
                    current: e.detail.current
                }
            });
        },
        onTouchMoveFun: function (e) {}
    },
    created: function () {},
    watch: {
        current: {
            handler: function (newVal, oldVal) {
                this.currentClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './tabs.css';
</style>