weex-nuke/lib/node_modules/nuke-ep-tabbar/docs/custom.md

基于 Rax 、Weex 的高性能组件体系 ~~

# ep-tabbar

- order: 0

配合列表视差效果的容器组件

---

```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 EpTabbar from 'nuke-ep-tabbar';
import ListView from 'nuke-list-view';
import Image from 'nuke-image';
import {MultiRow} from 'nuke-layout';

const NAV_ITEM_WIDTH = 200;

const nextData =[{ title: '福利社', key: 'h2', style: { width: NAV_ITEM_WIDTH } },
  { title: '限时购', key: 'h3', style: { width: NAV_ITEM_WIDTH } },
  { title: '居家', key: 'h4', style: { width: NAV_ITEM_WIDTH } },
  { title: '配件', key: 'h5', style: { width: NAV_ITEM_WIDTH } },
  { title: '特色区', key: 'h6', style: { width: NAV_ITEM_WIDTH } },
  { title: '其他', key: 'h7', style: { width: NAV_ITEM_WIDTH } }
];
const LIST_DATA_SOURCE = [
  { key: '001', title: '列表项' },
  { key: '002', title: '列表项' },
  { key: '003', title: '列表项' },
  { key: '004', title: '列表项' },
  { key: '005', title: '列表项' },
  { key: '006', title: '列表项' },
  { key: '007', title: '列表项' },
  { key: '008', title: '列表项' }
];


let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      key: 0,
      showDropDown:false,
      dataSource:[]
    };
  }
  componentDidMount(){
    setTimeout(()=>{
      this.setState({dataSource:nextData})
    },300)
  }
  /**
   * 渲染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 = '#5F646E';
    if (index === currIndex) {
      color = '#933BFF';
    }
    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;
  }
  goToTab=(index)=>{
    console.log(index);
    this.refs.mytab.wrappedInstance.slideTo(index);
  }
  renderDropDownCell = (item, index) => {
    return (
      <Touchable style={s.dropcell} onPress={()=>this.goToTab(index)}>
        <Text style={s.dropText}>{item.title}</Text>
      </Touchable>
    );
  };
  triggerPress=()=>{
    this.setState({showDropDown:!this.state.showDropDown})
  }

  renderRow = (item, index) => {
    return (
      <View style={s.item}>
        <Text style={s.itemText}>{`${item.title}-${index}`}</Text>
      </View>
    );
  };
  renderContent=()=>{
    const body=[];
    this.state.dataSource.map((item,index)=>{
      
      body.push(
        <EpTabbar.Item
            key={item.key}
            style={[s.tabItem, { backgroundColor: '#18314F' }]}
          >
            <ListView
              style={{backgroundColor:'#ddd', flex: 1, width: 750 }}
              dataSource={LIST_DATA_SOURCE}
              renderRow={this.renderRow}
            />
          </EpTabbar.Item>
      )
    })
    return body;
    
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
       
        <EpTabbar
          activeKey={this.state.key}
          dataSource={this.state.dataSource}
          navStyle={s.navStyle}
          navFocusStyle={s.focusStyle}
          renderNavItem={this.renderNavItem}
          renderLoading={this.renderLoading}
          navTop={true}
          ref="mytab"
          style={s.tabbar}
          epEnable={false}
          onChange={this.onChange}
          forbidNavScroll={false}
          beforeSlide={this.beforeSlide}
        >
        {this.renderContent()}

        </EpTabbar>
          <Touchable x="trigger" style={s.trigger} onPress={this.triggerPress}>
          <Text>...</Text>
          </Touchable>
        {
          this.state.showDropDown ?
        (
          <View x="dropdown" style={s.dropdown}>
          <MultiRow
              dataSource={this.state.dataSource}
              rows={3}
              renderCell={this.renderDropDownCell}
            />
          </View>)
          :null
        }
      </View>
    );
  }
};
const s = {
  paralleHeader: {
    height: 200,
    width: 750,
    backgroundColor: '#DFEFF9',
    justifyContent: 'center',
    alignItems: 'center'
  },
  tabbar: {
    // top: 200
  },
  navStyle: {
    width: 750,
    height: 88,
    justfiyContent: 'center',
    backgroundColor: '#F7F8FA'
  },
  focusStyle: {
    backgroundColor: '#933BFF',
    position: 'absolute',
    height: 4,
    width: 100,
    color: '#933BFF',
    top: 84,
    left: 40
  },
  navItem: {
    justifyContent: 'center',
    flex: 1,
    alignItems: 'center',
    fontSize: 28,
    fontWeight: 'bold',
    color: '#933BFF'
  },
  tabItem: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    backgroundColor: 'red'
  },
  tabContainer: {
    flex: 1
  },
  text: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  item: {
    width: 750,
    height: 300,
    alignItems: 'center',
    justifyContent: 'center'
  },
  trigger:{
    position:'absolute',
    width:60,
    height:88,
    top:0,
    right:0,
    zIndex:100,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor:'white'

  },
  dropdown:{
    zIndex:200,
    position:'absolute',
    top:88,
    width:750,
  },
  dropcell: {
    height: 100,
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center',
    
    marginTop: '-1rem',
    marginLeft: '-1rem'
  },
  dropText:{
    padding:6,
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#e8e8e8',
    fontSize:28,
  }
};
render(<App />);
```