mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-05-05 15:36:34 +08:00
* [improvement] Tab:升级到自定义组件 * fix: 去除冗余example代码 * [refactor] 重构badge为自定义组件 (#160) * fix: 去除tab组件使用对象入参方式,修改example用例 * refactor: 重构noticebar组件 * fix: 去除tab组件冗余属性字段
80 lines
1.4 KiB
Markdown
80 lines
1.4 KiB
Markdown
## 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
|
||
}
|
||
}));
|
||
```
|