@retailwe/ui-tab NPM

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; // 角标内容
  };
}