# ep-tabbar

- order: 0
- hide :true

作为容器组件的基础使用方式

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Touchable from 'nuke-touchable';
import Tabbar from 'nuke-ep-tabbar';
import Waterfall from 'rax-waterfall';
const NAV_ITEM_WIDTH = 300;
const KEY_LIST = [
  { title: '我的', key: 'my', style: { width: NAV_ITEM_WIDTH } },
  { title: '购物车', key: 'cart', style: { width: NAV_ITEM_WIDTH } },
  { title: '淘宝心选', key: 'xinxuan', style: { width: NAV_ITEM_WIDTH } }
];
let dataSource = [
  { height: 550, item: {} },
  { height: 624, item: {} },
  { height: 708, item: {} },
  { height: 600, item: {} },
  { height: 300, item: {} },
  { height: 100, item: {} },
  { height: 400, item: {} },
  { height: 550, item: {} },
  { height: 624, item: {} },
  { height: 708, item: {} },
  { height: 600, item: {} },
  { height: 300, item: {} },
  { height: 100, item: {} },
  { height: 400, item: {} }
];
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      key: 0,
      dataSource: []
    };
    // this.renderWaterFall = this.renderWaterFall.bind(this);
  }
  componentDidMount(){
      setTimeout(()=>{
          this.setState({dataSource:dataSource});
      },1000);
  }
  /**
   * 渲染tab主体的方法，入参为当前tab的key值。根据不同的key值选择渲染不同的route
   */
  renderPage = (itemData, currKey, prevKey) => {
    return (
      <View style={{ backgroundColor: 'red' }}>
        <Text>tab:{currKey}</Text>
      </View>
    );
  };
  /*
   * key:选中的值
   * type:切换类型  可以是滑动pan/点击导航click/code调用 code 等类型
   */
  onChange = (currKey, prevKey, type) => {
    // console.log(
    //   `[Debug] ${type} to currKey of 【${currKey}】 & prevKey is 【${prevKey}】`
    // );
  };
  /**
   *  渲染每个nav item的方法
   *  可以增加renderCustom方法，用于渲染固定位置
   */
  renderNavItem = (itemData, index, currIndex) => {
    let color = 'white';
    if (index === currIndex) {
      color = '#333';
    }
    return (
      <View style={[s.navItem, { width: itemData.style.width }]}>
        <Text style={{ color: color }}>{itemData.title}</Text>
      </View>
    );
  };
  /**
   * 渲染ep绑定时的tab切换加载
   */
  renderLoading() {
    return <Text>加载中...</Text>;
  }

  /**
   * 在滚动发生前的回调，可以用来阻止滚动发生
   */
  beforeSlide(index, type) {
    return true;
  }
    
  render() {
    return (
        
         <Waterfall
        columnWidth={375}
        columnCount={2}
        columnGap={0}
        dataSource={this.state.dataSource}
        style={{width:750,overflow:'scroll'}}
        onScroll={(e)=>{e.stopPropagation();console.log('scroll event')}}
        renderItem={(item, index) => {
          return (<View style={{height: item.height, backgroundColor: '#ccc', marginBottom: 20, marginLeft: 10, marginRight: 10}}>
            {index}
          </View>);
        }}
         />
    )
      
        
    ;
  }
};
const s = {
  navStyle: {
    width: 750,
    height: 88,
    backgroundColor: '#0D0630',
    justfiyContent: 'center'
  },
  focusStyle: {
    backgroundColor: '#E6F9AF',
    position: 'absolute',
    height: 88,
    width: NAV_ITEM_WIDTH,
    color: '#333'
  },
  navItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    fontSize: 28,
    fontWeight: 'bold',
    color: 'white'
  },
  tabItem: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    backgroundColor: 'red'
  },
  tabContainer: {
    flex: 1
  },
  text: {
    justifyContent: 'center',
    alignItems: 'center'
  }
};
render(<App />);
```