使用方式
- 前往github下载tabs_demo
- 将demo里面的components文件夹下的组件引入需要集成的项目中
- 在指定页面的json文件中注入组件
{
"usingComponents": {
"tabs": "/components/tabs/tabs",
"tab-page": "/components/tab-page/tab-page"
},
"navigationBarTitleText": "tabs组件"
}
- 代码示例
<view class="container">
<tabs list="{{tabs}}" tab-class="tab-class" showBadge="{{true}}" swiper="{{true}}" activeColor="#FF0000" normalColor="#888888" bindchange="tabChange">
<tab-page slot="{{item.name}}" wx:for="{{tabs}}" wx:key="name">
<view style="height: 100%;background-color: {{colors[index]}};"></view>
</tab-page>
</tabs>
</view>
参数解释
参数名 |
参数类型 |
默认值 |
说明 |
list |
Array |
[] |
tab数组,用于显示tab名称和角标,形如[{name:"订单", count: 10}] |
current |
Number |
0 |
当前tabs选中第几个 |
normalColor |
String |
"#101010" |
tab未选中字体颜色 |
activeColor |
String |
"#55b428" |
tab选中字体颜色 |
showBadge |
Boolean |
true |
tab角标是否显示 |
circular |
Boolean |
true |
tab-page是否可以循环滚动 |
swiper |
Boolean |
false |
tab-page是否可以手动滑动 |
tab-class |
String |
|
tabs整体额外布局 |
tab-header-class |
String |
|
tabs头部额外布局 |
tab-item-class |
String |
|
tabs头部选项额外布局 |
tab-item-name-class |
String |
|
tabs头部选项名称额外布局 |
tab-item-badge-class |
String |
|
tabs头部选项角标额外布局 |
tab-page-class |
String |
|
tabs页面布局 |
bindchange |
Function |
|
tabs切换回调 |
参数名 |
参数类型 |
默认值 |
说明 |
slot |
String |
|
填入对应tab的name |