caimei-applets-store/pages/views/goods/components/goods-top-tabs/goods-top-tabs.vue

<template>
    <view class="top-tabs">
        <tui-tabs
            :tabs="tabs"
            itemWidth="33.3333%"
            :currentTab="currentTab"
            @change="change"
            :isFixed="true"
            selectedColor="#ff457b"
            sliderBgColor="#ff457b"
        ></tui-tabs>
    </view>
</template>

<script>
export default {
    name: 'goods-top-tabs',
    props: {
        current: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            currentTab: 0,
            tabs: [
                {
                    name: '商品'
                },
                {
                    name: '详情'
                },
                {
                    name: '服务项目'
                }
            ]
        }
    },
    watch: {
        current: {
            handler: function(nVal) {
                this.currentTab = nVal
            },
            immediate: true
        }
    },
    methods: {
        change(e) {
            this.currentTab = e.index
            this.$emit('change', this.currentTab)
        }
    }
}
</script>

<style lang="scss" scoped></style>