微信小程序自定义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组件"
}

2. 代码示例

参数解释

• 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