写在前边：《微信小程序_···》系列的博文，是学习了b站《前端开发利器vue，微信小程序快速开发实战，黑马程序员前端web教程》BY黑马程序员之后，的学习笔记，这是视频地址：https://www.bilibili.com/video/BV1Sc41187nZ?p=1，该视频是讲了一个基于uni-app的项目

1 分段器_uni-segmented-control

nui-ui中的一个组件，也就是标签页，tab栏

2 代码示例

<template>
    <view>
        <view>
            <uni-segmented-control
                    :current="current"
                    :values="items.map(value => value.title)"
                    @clickItem="onClickItem"
                    styleType="text"
                    activeColor="#d4237a"
            ></uni-segmented-control>
            <view class="content">
                <view v-if="current === 0">
                    <home-recommend></home-recommend>
                </view>
                <view v-if="current === 1">
                    <home-category></home-category>
                </view>
                <view v-if="current === 2">
                    <home-new></home-new>
                </view>
                <view v-if="current === 2">
                    <home-album></home-album>
                </view>
            </view>
        </view>
    </view>
</template>

<script>

    import homeAlbum from "./home-album";
    import homeCategory from "./home-category";
    import homeNew from "./home-new";
    import homeRecommend from "./home-recommend";

    export default {
        name: "index",
        data(){
            return{
                items:[
                    {title:"推荐"},
                    {title:"分类"},
                    {title:"最新"},
                    {title:"专辑"},
                ],
                current:0
            }
        },
        components:{
            homeAlbum,
            homeCategory,
            homeNew,
            homeRecommend,
        },
        methods:{
            onClickItem(e){
                if(this.current != e.currentIndex){
                    this.current = e.currentIndex;
                }
            }
        }


    }
</script>

<style scoped lang="scss">
.home_tab {
        .home_tab_title {
            position: relative;
            .title_inner {
                width: 60%;
                margin: 0 auto;
            }
            .iconsearch {
                position: absolute;
                top:50%;
                transform: translateY(-50%);
                right: 5%;
            }
        }
        .home_tab_content {

        }
    }

</style>

3 代码解释

• 功能，有四个tab栏，点击不同的tab切换到对应的组件
• 第6行，values，需要的是字符串数组
• 第8行，styleType对应的上述字符串数组显示的形式，按钮|文本- - -button|text
• 第9行，activeColor设置的是上述字体的颜色
• 13，16，19，22行分别是自己定义的组件
• 56行，onClickItem事件是将current切换成当前点击的tab页面

效果图