Tab 标签

使用指南

在 index.json 中引入组件

  1. {
  2.   "usingComponents": {
  3.     "zan-tab": "path/to/zanui-weapp/dist/tab/index"
  4.   }
  5. }

在 index.js 中声明组件数据

  1. // 在 Page 中声明 Tab 依赖的展示数据
  2. Page({
  3.   data: {
  4.     list: [{
  5.       id: 'xxx',
  6.       title: 'xxx'
  7.     }],
  8.     selectedId: 'xxx',
  9.     ...
  10.   }
  11. })

代码演示

可以在任意位置上使用 zan-tab 标签。传入对应的数据即可。

  1. <zan-tab
  2.   scroll="{{ scroll }}"
  3.   list="{{ list }}"
  4.   selected-id="{{ selectedId }}"
  5.   height="{{ height }}"
  6.   fixed="{{ fixed }}"
  7.   bindtabchange="handleTabChange"
  8. />
参数 说明 类型 默认值 必须
scroll 是否开启 tab 左右滑动模式 Boolean -
list 可选项列表 Array -
selectedId 选中id - -
height tab高度 Number -
fixed 是否固定位置 Boolean -

tab 组件中，list 数据格式如下

  1. [{
  2.   // tab 项 id
  3.   id: 'all',
  4.   // tab 项展示文案
  5.   title: '全部'
  6. }, {
  7.   id: 'topay',
  8.   title: '待付款'
  9. }, {
  10.   id: 'tosend',
  11.   title: '待发货'
  12. }, {
  13.   id: 'send',
  14.   title: '待收货'
  15. }, {
  16.   id: 'sign',
  17.   title: '已完成'
  18. }]

可以监听 bindtabchange 事件回调，在页面注册回调函数

  1. Page({
  2.   customCallback(selectedId) {
  3.     // selectId 表示被选中 tab 项的 id
  4.   }
  5. }));

Tab 标签 - 图1
微信扫一扫

原文:

https://www.youzanyun.com/zanui/weapp#/zanui/interactive/tab