使用方式
- 前往github下載tabs_demo
- 將demo里面的components文件夾下的組件引入需要集成的項(xiàng)目中
- 在指定頁面的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>
參數(shù)解釋
| 參數(shù)名 |
參數(shù)類型 |
默認(rèn)值 |
說明 |
| list |
Array |
[] |
tab數(shù)組，用于顯示tab名稱和角標(biāo)，形如[{name:"訂單", count: 10}] |
| current |
Number |
0 |
當(dāng)前tabs選中第幾個 |
| normalColor |
String |
"#101010" |
tab未選中字體顏色 |
| activeColor |
String |
"#55b428" |
tab選中字體顏色 |
| showBadge |
Boolean |
true |
tab角標(biāo)是否顯示 |
| circular |
Boolean |
true |
tab-page是否可以循環(huán)滾動 |
| swiper |
Boolean |
false |
tab-page是否可以手動滑動 |
| tab-class |
String |
|
tabs整體額外布局 |
| tab-header-class |
String |
|
tabs頭部額外布局 |
| tab-item-class |
String |
|
tabs頭部選項(xiàng)額外布局 |
| tab-item-name-class |
String |
|
tabs頭部選項(xiàng)名稱額外布局 |
| tab-item-badge-class |
String |
|
tabs頭部選項(xiàng)角標(biāo)額外布局 |
| tab-page-class |
String |
|
tabs頁面布局 |
| bindchange |
Function |
|
tabs切換回調(diào) |
| 參數(shù)名 |
參數(shù)類型 |
默認(rèn)值 |
說明 |
| slot |
String |
|
填入對應(yīng)tab的name |
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
