# nuke-tab-slider
> 滑动切换tab
Latest version **1.0.0** (published 2017-09-11) · 0 weekly downloads
## Install
```sh
npm install nuke-tab-slider
pnpm add nuke-tab-slider
yarn add nuke-tab-slider
bun add nuke-tab-slider
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-09-11 |
| First published | 2016-10-10 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | dengce.dc |
| Maintainers | doub, fnatic, leanhunter |
| Keywords | nuke, tab-slider |
## Links
- npm: https://www.npmjs.com/package/nuke-tab-slider
- Repository: git@gitlab.alibaba-inc.com:nuke/tab-slider
- npm.io page: https://npm.io/package/nuke-tab-slider
## Dependencies (5)
- [nuke-text](https://npm.io/package/nuke-text.md) 0.x.x
- [nuke-view](https://npm.io/package/nuke-view.md) 0.x.x
- [nuke-dimensions](https://npm.io/package/nuke-dimensions.md) 0.x.x
- [nuke-scroll-view](https://npm.io/package/nuke-scroll-view.md) ^0.0.3
- [component-emitter](https://npm.io/package/component-emitter.md) ^1.2.1
## Alternatives
- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads
## Recent versions
- 1.0.0 (latest) — 2017-09-11
- 0.3.2 — 2017-03-24
- 0.3.1 — 2017-02-20
- 0.3.0 — 2017-02-19
- 0.2.0 — 2017-02-13
- 0.1.14 — 2016-12-08
- 0.1.13 — 2016-12-06
- 0.1.12 — 2016-12-02
- 0.1.11 — 2016-12-01
- 0.1.10 — 2016-11-30
- 0.1.9 — 2016-11-27
- 0.1.8 — 2016-11-27
- 0.1.7 — 2016-11-23
- 0.1.6 — 2016-11-23
- 0.1.5 — 2016-11-22
- … 37 more at https://npm.io/package/nuke-tab-slider/versions
## README
# tabSlider 1.0.0
重构了原有tabSlider的底层实现，自定义程度更高。
## 综述
TabSlider: 横滑交互组件
## API说明
### 属性
|名称|类型|默认值|描述|是否必填|
|:---------------|:--------|:----|:----------|:----------|
|tabList|Array|null|内容列表，一个item对应一个tab|是|
|itemWidthList|Array|null|每一个头部tab item的宽度，用以计算切换时滚动的距离|是|
|tabStyle|Object|null|头部tab的样式，scrollview父容器的样式|是|
|tabInnerStyle|Object|null|头部tab内容的样式，scrollview的样式|是|
|tabFocusStyle|Object|null|选中tab item的样式，使用了该样式时，会增加选中tab的动画|否|
|renderTabItem|Function|null|渲染每一个tab item的方法|是|
|renderPage|Function|null|渲染每一个tab对应主体内容的方法|是|
|renderNav|Function|null|渲染每一个tab nav的方法，对应着头条的下拉展示更多|否|
|renderLoading|Function|null|作用于非当前页，用于渲染loading提示|否|
|tabClickCallback|Function|null|点击头部tab或者切换列表内容时的回调函数|否|
|pageTop|Number|取tabStyle或者tabInnerStyle的高度|tab内容距离头部的高度|否|
|sidesDisablePan|Boolean|false|第一帧禁止往左滑动，最后一帧禁止往右滑动|否|
| active| number | false | 默认初始化的tab | 否 |
| navTop | bool | false | tab nav在头部还是在底| 否 |
| width | number | 750 | tab渲染宽度，默认全屏| 否 |
| height | number | 全屏 | tab渲染高度，默认包含tab nav全屏 |否|
### 事件
|名称|类型|默认值|描述|是否必填|
|:---------------|:--------|:----|:----------|:----------|
| onChange | Function | null | 点击头部tab或者切换列表内容时的回调函数 | 否 |
### 方法
this.refs.TabSlider.slideTo(2)
- 用于从外部主动切换到对应的tab项
### 布局说明
tabSlider的布局是使用绝对定位布局，大致的布局方式如下图。所以，使用该组件时，需要在tabbar的外层有足够宽高让其撑满，建议tabbar的外层容器使用绝对定位布局。
## 使用方法
tabSlider 1.0.0 采用了类似ListView renderRow的渲染方法。对tab头、tab体的渲染都需要使用对应的渲染方法。具体来说，如果需要例子中效果，需要实现几步：
### 1、定义tabItem，既demo中的热门、黑板报等导航内容。eg:
```javascript
/** @jsx createElement */
'use strict';
import { createElement, Component } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Image from 'nuke-image';
import styles from './demo.styles';
class TabItem extends Component {
render() {
const { itemData, index, currentIndex, isRenderCurrent } = this.props;
if (itemData) {
return (
{itemData.name ? (
{itemData.name}
) : null}
);
}
return null;
}
}
export default TabItem;
```
### 2、 tabItem的传入数据包括 itemData, index, currentIndex, isRenderCurrent。
其中itemData是开发者自己定义的导航list数据如下,根据渲染方法的不同。数据格式和内容均是可以自定义的：
```json
tabList: [
{
name: '热门',
sceneId: '1',
tabType: '1'
},
...
],
```
### 3、定义renderPage，渲染tab的contain部分，以下是一个典型的tabPage。
```javascript
class TabPage extends Component {
render() {
const { index } = this.props;
return (
);
}
renderRow = (itemData, i) => {
const { index } = this.props;
return