uni-app 小程序分段器tab 的实现

小鱼儿 2023-01-03 12:58 524阅读 0赞

**效果图如图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]

**1，写好四个要展示的组件**

注意：组件的命名一定要规范，例如home-XXX，XXX 一定要写英文不能乱写，否则不能显示组件；

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70 1]

**2，进行展示**

<home-recommend></home-recommend>
    <home-category></home-category>
    <home-new></home-new>
    <home-album></home-album>

**3，引入uni-ui 的分段器 组件**

import {  uniSegmentedControl } from "@dcloudio/uni-ui";

**4，注册 分段器组件**

components: { uniSegmentedControl,},

**5，提供标题数据 data 和 事件函数**

data() { 
        return { 
          items: [
            {  title: "专辑" },
            {  title: "分类" },
            {  title: "最新" },
            {  title: "推荐" },
          ],
          current: 0,
        };
      },
      methods: { 
        onClickItem(e) { 
          if (this.current !== e.currentIndex) { 
            this.current = e.currentIndex;
          }
        },
      },

**6，填入 wxml**

<view>
          <uni-segmented-control :current="current" :values="items.map((v) => v.title)" @clickItem="onClickItem" style-type="text" active-color="red" ></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 === 3"> <home-album></home-album> </view>
          </view>
        </view>

[具体请查看官方文档][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]: /images/20221119/10a17515f8ae4eda84341945a80bf6e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221119/908f86bf50374c5a85a98c6685051250.png
[Link 1]: https://ext.dcloud.net.cn/plugin?id=54