07_ package rolling tab navigation component

1. Create a sub-assembly swiper-tab-head.vue

 2. Cut vue code and css code

 vue Code:

<Template>
    <View class = "UNI-Tab-bar">
        <-! lateral rolling layout ->
        <Scroll Scroll-X-View class = "UNI-Swiper-Tab">
            <-! a navigation bar block ->
            <V-block for = "(Tab, index) in tabBars": Key = "tab.id">
                ! <- inside a piece of content navigation ->
                <View class = "tab-with-Swiper List ": class =" { 'Active': the tabIndex index ==} "@ TAP =" tabtap (index) ">
                    {{}} tab.name
                    <View class =" Tab-Swiper-Line "> </ View> <! - this is underlined selected items ->
                </ View>
            </ Block>
        </ the Scroll-View>
    </view>
</template>

css code:

<style scoped>
    .uni-swiper-tab {
        border-bottom: 1upx solid #EEEEEE;
    }

    .swiper-tab-list {
        color: #969696;
        font-weight: bold;
    }

    .uni-tab-bar .active {
        color: #343434;
    }

    .active .swiper-tab-line {
        border-bottom: 4upx solid #FEDE33;
        width: 62upx;
        margin: auto;
        border-top: 4upx solid #FEDE33;
        border-radius: 20upx;
    }
</style>

3. The transfer js code:

 js code:

<script>
    export default {
        props:{
            tabBars:Array,
            tabIndex:Number
        },
        methods:{
            tabtap(index){
                this.$emit('tabtap',index);
            },
        }
    }
</script>

4. The call parent component subassembly