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

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

# ScrollView 包含下拉刷新特性

* order: 0
- title_en: includes pull-down refresh feature
包含下拉刷新特性

---
```js
/** @jsx createElement */
import { View, Text, ScrollView, RefreshControl } from 'weex-nuke';

<NukePlayGround>

  //初始 state
  constructor() {
    super();
    this.state={
      isRefreshing: false,
      refreshText: '↓ 下拉刷新',
      data:[
          //...省略部分代码
      ]
    }
  }

  handleRefresh =()=>{
    this.setState({
      isRefreshing: true,
      refreshText: '加载中',
    });
    // mock ajax 此处替换为你的 ajax 请求
    setTimeout(() => {
      this.setState({
        isRefreshing: false,
        data: [
            // data 字段变更
        ],
        refreshText: '↓ 下拉刷新',
      });

    }, 1000);
  }
  render(){
    return(
      <ScrollView>
        <RefreshControl isRefreshing={this.state.isRefreshing} style={{width:750,height:100}} onRefresh={this.handleRefresh}>
            <Text>{this.state.refreshText}</Text>
        </RefreshControl>
        {/* 此处为你的内容区域 */}
      <ScrollView>
    )
  }
</NukePlayGround>
```
---

```js

import { createElement, Component, render } from 'rax';
let App = class NukeDemoIndex 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>
      );
    });
    doms.push(null);
    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"
        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 styles = {
  vscroller: {
    flex: 1
  },
  itemRefresh: {
    width: 750,
    height: 200,
    backgroundColor: '#ADDADD',
    alignItems: 'center',
    justifyContent: 'center'
  },
  item: {
    height: '300rem',
    alignItems: 'center',
    justifyContent: 'center'
  }
};
render(<App />);
```