写在前边:《微信小程序_···》系列的博文,是学习了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页面

效果图

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐