# TabsDemo

**Repository Path**: itw_shenyw/tabs

## Basic Information

- **Project Name**: TabsDemo
- **Description**: 仿Android TabLayout+ViewPager
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 1
- **Created**: 2024-07-12
- **Last Updated**: 2026-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


**仿Android TabLayout+ViewPager实现，支持下划线跟随手指滑动，支持点击切换tab**   

**安装方式** 
ohpm install @tabs/tabs

 **请看VCR:** 
[tabs演示视频](http://go.plvideo.cn/front/video/view?vid=0518a12ca65f52d5f7e069719102a1e7_0)

 **字定义组件入参** ：
| 字段           | 类型                                       | 必填 | 默认值                        | 说明                      |
|--------------|------------------------------------------|----|----------------------------|-------------------------|
| currentIndex | number                                   | 是  | 0                          | 当前选中的Index              |
| barPosition  | ItemAlign                                | 否  | ItemAlign.Center           | titleBar显示位置，默认中间对齐     |
| tabsConfig   | ListTabsConfig                           | 否  | ListTabsConfig.getConfig() | 默认配置文件，代码中已预设，如需修改可自行编辑 |
| titleBar     | <T = Tab>(tab: T, index: number) => void | 是  |                            | 标题栏布局                   |
| content      | <T = Tab>(tab: T, index: number) => void | 是  |                            | 内容布局（内部使用Swiper）        |

 **config配置项：** 
| 字段              | 类型            | 必填 | 默认值                   | 说明                                        |
|-----------------|---------------|----|-----------------------|-------------------------------------------|
| itemWidth       | Length        | 否  | 20%                   | item宽度 默认：'20%'                           |
| itemHeight      | Length        | 否  | 38                    | item高度 默认：38                              |
| itemMargin      | Margin        | 否  |                       | item外边距                                   |
| itemPadding     | Padding       | 否  |                       | item内边距                                   |
| fontSize        | Length        | 否  | 16                    | 字体大小 默认：16                                |
| maxLines        | number        | 否  | 1                     | 最大支持行数 注：自定义布局无效 默认：1                     |
| textOverflow    | TextOverflow  | 否  | TextOverflow.Ellipsis | 文本溢出位置 默认 TextOverflow.Ellipsis 注：自定义布局无效 |
| fontDefColor    | ResourceColor | 否  | #182431               | 未选中字体颜色 默认：#182431                        |
| fontSelectColor | ResourceColor | 否  | #007DFF               | 选中字体颜色 默认：#007DFF                         |
| textAlign             | TextAlign     | 否              | TextAlign.Center | 字体位置 默认：TextAlign.Center |           |                |
| fontDefWeight         | number        或 FontWeight     或string           | 否                        | 400       | 未选中字体加粗 默认:400 |
| fontSelectWeight      | number        或FontWeight     或 string           | 否                        | 600       | 选中字体加粗 默认：600  |
| indicatorWidth        | Length        | 否              | 20               | 线的宽度 默认：20线的宽度 默认：20     |           |                |
| indicatorHeight       | Length        | 否              | 2                | 线的高度 默认：2                |           |                |
| indicatorMarginTop    | Length        | 否              |                  | 下划线顶部外边距 默认：空            |           |                |
| indicatorMarginBottom | Length        | 否              | 2                | 下划线底部外边距 默认：2            |           |                |
| borderRadius          | Length        或 BorderRadiuses | 否                | 1                        | 线的圆角 默认：1 |                |
| lineColor             | ResourceColor | 否              | #007DFF          | 线颜色 默认#007DFF            |           |                |
| scrollAlign       | ScrollAlign                                              | 否 | ScrollAlign.END | 页面切换到尾部时，滚动对齐方式 默认ScrollAlign.END |
| animationDuration | number                                                   | 否 | 300             | 动画执行时长 默认：300                      |
| isShowLine        | boolean                                                  | 否 | 显示              | 收否显示下划线 默认显示                       |
| cachedCount       | number                                                   | 否 | 1               | 预加载个数，遵循官方Swiper                   |
| disableSwipe      | boolean                                                  | 否 | 不禁止             | 禁止组件滑动（content布局滑动） 默认不禁止          |
| onScroll          | (scrollOffset: number, scrollState: ScrollState) => void | 否 |                 | List滑动监听                           |
| onScrollStart     | () => void                                               | 否 |                 | 滑动开始监听                             |
| onScrollStop      | () => void                                               | 否 |                 | 滑动结束监听                             |
| onChange          | (index: number) => void                                  | 否 |                 | 页面切换监听                             |

 **config内API说明** ：  
1. onScroll?: (scrollOffset: number, scrollState: ScrollState) => void    
List滑动监听，遵循List控件滑动监听，可在config中实现方法  
示例1.  this.config.onScroll=(scrollOffset: number, scrollState: ScrollState) =>{  
            //实现逻辑  
    }  
示例2.getConfig({  
      onScroll:(scrollOffset: number, scrollState: ScrollState) =>{  
            //实现逻辑  
      }  
    })  
2. onScrollStart?: () => void  
List滑动开始监听，遵循List控件滑动监听，可在config中实现方法，示例同上  
3. onScrollStop?: () => void  
List滑动结束监听，遵循List控件滑动监听，可在config中实现方法，示例同上  
4. onChange?: (index: number) => void  
Swiper切换监听，遵循Swiper控件切换监听，可在config中实现方法，示例同上  




小白开发，一起学习进步。编辑不易，感觉有用麻烦给个star,感谢！！！