tab 顶部导航

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-tab": "@retailwe/ui-tab/index"

}

代码演示

基础用法

通过tabList属性传入 tab 项 tab 项为对象, text 设置文本, key 设置对应 tab 标识; 通过在status属性来初始化选中项

<wr-tab
  status="{{status}}"
  bind:tabChange="tabChange"
  tabList="{{list}}"
  isScroll="{{true}}"
/>

Page({
  data: {
    status: 0,
    list: [
      {
        text: '全部',
        key: 0,
      },
      {
        text: '待付款',
        key: 1,
      },
      {
        text: '待取货',
        key: 2,
      },
      {
        text: '已完成',
        key: 3,
      },
    ],
  },

  tabChange(e) {
    this.setData({
      status: e.detail,
    });
  },
});

API

tab Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | | -------- | ------------------------- | --------- | ------ | ---- | | tabList | tab 数据 | array | [] | - | | status | 选中项的索引 | number | 0 | - | | isScroll | 配置 tab 是否支持横向滑动 | boolean | true | - | | color | 默认颜色 | string | - | - | | lineColor | 激活颜色 | string | - | - | | lineHeight | 激活底部线条高度 | number | - | - | | lineWidth |激活底部线条宽度 | boolean | number | - |

tabList属性声明

interface TabList {
  [index: number]: {
    key: number | string; // 每个对象的唯一值，用于锁定当前选中的对象
    text: string; // tab文案
    dot?: boolean; // 是否显示红点角标，为true时info属性无效
    info?: number | string; // 角标内容
  };
}

tab Event

| 事件名 | 说明 | 参数 | | --------- | -------------- | ------------------ | | tabChange | 切换选项时触发 | 当前选中选项的索引 |