微信小程序自定義tabs組件

1.gif

使用方式

  • 下載自定義tabs組件并引入新項(xiàng)目
  1. 前往github下載tabs_demo
  2. 將demo里面的components文件夾下的組件引入需要集成的項(xiàng)目中
  • 使用組件
  1. 在指定頁面的json文件中注入組件
{
  "usingComponents": {
    "tabs": "/components/tabs/tabs",
    "tab-page": "/components/tab-page/tab-page"
  },
  "navigationBarTitleText": "tabs組件"
}
  1. 代碼示例
<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ù)解釋

  • tabs
參數(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)
  • tab-page
參數(shù)名 參數(shù)類型 默認(rèn)值 說明
slot String 填入對應(yīng)tab的name
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容