vant-weapp/packages/tab/README.md
kobeCristiano 86152d45ce [refactor] Noticebar:升级到自定义组件 (#165)
* [improvement] Tab:升级到自定义组件

* fix: 去除冗余example代码

* [refactor] 重构badge为自定义组件 (#160)

* fix: 去除tab组件使用对象入参方式,修改example用例

* refactor: 重构noticebar组件

* fix: 去除tab组件冗余属性字段
2018-03-25 18:30:53 +08:00

80 lines
1.4 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## Tab 标签
### 使用指南
在 index.json 中引入组件
```json
{
"usingComponents": {
"zan-tab": "path/to/zanui-weapp/dist/tab/index"
}
}
```
在 index.js 中声明组件数据
```js
// 在 Page 中声明 Tab 依赖的展示数据
Page({
data: {
list: [{
id: 'xxx',
title: 'xxx'
}],
selectedId: 'xxx',
...
}
})
```
### 代码演示
可以在任意位置上使用 zan-tab 标签。传入对应的数据即可。
```html
<zan-tab
scroll="{{ scroll }}"
list="{{ list }}"
selected-id="{{ selectedId }}"
height="{{ height }}"
fixed="{{ fixed }}"
bindtabchange="handleTabChange"
/>
```
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| scroll | 是否开启 tab 左右滑动模式 | Boolean | - | |
| list | 可选项列表 | Array | - | |
| selectedId | 选中id | - | - | |
| height | tab高度 | Number | - | |
| fixed | 是否固定位置 | Boolean | - | |
tab 组件中list 数据格式如下
```js
[{
// tab 项 id
id: 'all',
// tab 项展示文案
title: '全部'
}, {
id: 'topay',
title: '待付款'
}, {
id: 'tosend',
title: '待发货'
}, {
id: 'send',
title: '待收货'
}, {
id: 'sign',
title: '已完成'
}]
```
可以监听 bindtabchange 事件回调,在页面注册回调函数
```js
Page({
customCallback(selectedId) {
// selectId 表示被选中 tab 项的 id
}
}));
```