UNPKG

weex-amui

Version:
48 lines (39 loc) 1.44 kB
# am-tabs 标签页 > 用于让用户在不同的视图中进行切换。 ### 规则 - 标签数量,一般 2-4 个;其中,标签中的文案需要精简,一般 2-4 个字。 ## 使用方法 ```vue <template> <div> <am-tabs v-model="selected" :tabs="['Tab1', 'Tab2', 'Tab3']" /> </div> </template> <script> import { AmTabs } from 'weex-amui' export default { components: { AmTabs }, data () { return { selected: 0 } } } </script> ``` 更详细代码可以参考 [这里](https://github.com/HMingHe/weex-amui/blob/master/example/tabs/index.vue) ### 可配置参数 | Prop | Type | Required | Default | Description | | ---- |:----:|:---:|:-------:|:----------:| | **`tabs`** | `Array` | `Y` | `[]` | 选项数组,值是字符串 | | **`selected`** | `Number` | `Y` | `0` | 选中项在数组中的索引,可以用 `v-model` 双向绑定 | | **`tabBarPosition`** | `String` | `N` | `top` | TabBar位置, `top`, `bottom`, `left`, `right`, 其中 `top` 和 `bottom` 是水平模式,`left` 和 `right` 是垂直模式 | | **`tabWidth`** | `Number` | `N` | `null` | tab的宽度(注1) | - 注1`垂直模式` 默认可滚动;`水平模式` 如果没有设置 `tabWidth`,tab平分宽度(flex: 1),不可以滚动。 ### Events | Event | Description | Parameters | | ---- |:----------:|:----:| | **`change`** | `切换时调用` | `(index, value)` |