weex-nuke/docs/scroll-view/demo/tabbar.md

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

# ScrollView demo

* order: 8
* hide:true

包含下拉刷新特性

---

```js
/** @jsx createElement */
import { View, Text, ScrollView, RefreshControl, Tabbar, Iconfont } from 'weex-nuke';
import { createElement, Component, render } from 'rax';
class ScrollList extends Component {
  constructor() {
    super();
    this.state = {
      isRefreshing: false,
      refreshText: '↓ 下拉刷新',
      data: [
        { key: 'A', bg: '#1170bc', color: '#ffffff' },
        { key: 'B', bg: '#3089dc', color: '#ffffff' },
        { key: 'C', bg: '#f1f1f1', color: '#3d4145' },
        { key: 'F', bg: 'yellow', color: '#ffffff' },
        { key: 'G', bg: 'red', color: '#ffffff' }
      ]
    };
  }
  getViews() {
    let doms = [];
    this.state.data.map((item, index) => {
      doms.push(
        <View style={[styles.item, { backgroundColor: item.bg }]}>
          <Text style={{ color: item.color }}>{item.key}</Text>
        </View>
      );
    });

    return doms;
  }

  handleRefresh = () => {
    console.log('trigger refresh');
    this.setState({
      isRefreshing: true,
      refreshText: '加载中'
    });
    //mock ajax
    setTimeout(() => {
      this.setState({
        isRefreshing: false,
        data: [{ key: 'D', bg: '#ff6600', color: '#ffffff' }].concat(
          this.state.data
        ),
        refreshText: '↓ 下拉刷新'
      });
    }, 1000);
  };
  loadmore = () => {
    console.log('loadmore~~~~~');
    // 底部加载更多
    this.setState({
      data: this.state.data.concat([
        { key: 'E', bg: '#B91630', color: '#ffffff' }
      ])
    });
  };
  render() {
    return (
      <ScrollView
        ref="vscroller"
        id={this.props.id}
        style={styles.vscroller}
        onEndReachedThreshold={20}
        onEndReached={this.loadmore}
        showScrollBar={false}
        onScroll={e => {
          console.log(e);
        }}
      >
        <RefreshControl
          refreshing={this.state.isRefreshing}
          style={styles.itemRefresh}
          onRefresh={this.handleRefresh}
        >
          <Text>{this.state.refreshText}</Text>
        </RefreshControl>
        {this.getViews()}
      </ScrollView>
    );
  }
}

const iconsMap = {
  tab1: {
    icon: '\ue702',
    name: '首页'
  },
  tab2: {
    icon: '\ue728',
    name: '设置'
  }
};
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      activeKey: { key: 'tab1' }
    };
  }
  componentDidMount() {
    Iconfont({
      name: 'tabicons',
      url: 'https://at.alicdn.com/t/font_463880_2ir6cgkiscpfzuxr.ttf'
    });
  }
  renderContent = pageText => {
    return <ScrollList id={pageText} />;
  };
  renderItemWithIcon = (iconName, isActive, key) => {
    return (
      <View style={styles.tabItem}>
        <View
          style={[styles.itemIcon, isActive ? styles.itemIconActiveBg : {}]}
        >
          <Text style={[styles.icon, isActive ? styles.activeText : {}]}>
            {iconsMap[iconName]['icon']}
          </Text>
        </View>
        <Text style={[styles.itemText, isActive ? styles.activeText : {}]}>
          {iconsMap[iconName]['name']}
        </Text>
      </View>
    );
  };
  render() {
    return (
      <Tabbar iconBar={true} activeKey={this.state.activeKey}>
        <Tabbar.Item
          tabKey="tab1"
          render={this.renderItemWithIcon.bind(this, 'tab1')}
        >
          {this.renderContent('tab1')}
        </Tabbar.Item>
        <Tabbar.Item
          tabKey="tab2"
          render={this.renderItemWithIcon.bind(this, 'tab2')}
        >
          {this.renderContent('tab2')}
        </Tabbar.Item>
      </Tabbar>
    );
  }
};
const styles = {
  vscroller: {
    flex: 1
  },
  itemRefresh: {
    width: 750,
    height: 200,
    backgroundColor: '#ADDADD',
    alignItems: 'center',
    justifyContent: 'center'
  },
  item: {
    height: 300,
    alignItems: 'center',
    justifyContent: 'center'
  },
  tabContent: {
    flex: 1,
    backgroundColor: '#ffffff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  tabText: {
    fontSize: 40
  },
  tabItem: {
    height: 70,
    alignItems: 'center',
    justifyContent: 'center'
  },
  icon: {
    fontFamily: 'tabicons',
    fontSize: 52,
    color: '#999999'
  },

  itemIcon: {
    width: 48,
    height: 48,
    borderRadius: 24,
    marginBottom: 6,
    marginTop: 14,
    alignItems: 'center',
    justifyContent: 'center'
  },
  itemText: {
    fontSize: 24
  },
  activeText: {
    color: '#3089dc'
  }
};
render(<App />);
render(<App />);
```