微信小程序自定义tabs组件

1.gif

使用方式

  • 下载自定义tabs组件并引入新项目
  1. 前往github下载tabs_demo
  2. 将demo里面的components文件夹下的组件引入需要集成的项目中
  • 使用组件
  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>

参数解释

  • tabs
参数名 参数类型 默认值 说明
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切换回调
  • tab-page
参数名 参数类型 默认值 说明
slot String 填入对应tab的name
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容