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:

/** @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 (
        <View
          style={
            isRenderCurrent && index === currentIndex ? (
              [styles.tabItem, styles.tabItemCur]
            ) : (
              styles.tabItem
            )
          }
        >
          {itemData.name ? (
            <View style={styles.tabTitle}>
              <Text
                style={
                  isRenderCurrent && index === currentIndex ? (
                    [styles.tabText, styles.tabTextCur]
                  ) : (
                    styles.tabText
                  )
                }
              >
                {itemData.name}
              </Text>
            </View>
          ) : null}
        </View>
      );
    }
    return null;
  }
}

export default TabItem;

2、 tabItem的传入数据包括 itemData, index, currentIndex, isRenderCurrent。

其中itemData是开发者自己定义的导航list数据如下,根据渲染方法的不同。数据格式和内容均是可以自定义的：

tabList: [
    {
      name: '热门',
      sceneId: '1',
      tabType: '1'
    },
    ...
  ],

3、定义renderPage，渲染tab的contain部分，以下是一个典型的tabPage。

class TabPage extends Component {

  render() {
    const { index } = this.props;
    return (
      <ListView
        id={`list${index}`}
        ref={`list${index}`}
        renderRow={this.renderRow}
        dataSource={this.qdList}
      />
    );
  }

  renderRow = (itemData, i) => {
    const { index } = this.props;
    return <Item itemData={itemData} index={i} pageIndex={index} />;
  };
}

4、可选定义切换时的动画组件 renderLoading

class TabLoading extends Component {
  render() {
    return (
      <View style={styles.pageLoading} data-ignore="true">
        <Image
          style={styles.loadingImg}
          source={{
            uri: '//gw.alicdn.com/tfs/TB1x9J7PXXXXXcHXVXXXXXXXXXX-140-80.gif'
          }}
        />
      </View>
    );
  }
}

5、 其他API请参考上面的API文档和使用demo。

** PS:如果依旧无法实现，可使用脚手架打开场景场景市场，查看tabSlider的使用源代码。**