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

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

# ScrollView demo

* order: 0

包含下拉刷新特性

---

```js
/** @jsx createElement */
import { Button, ScrollView, Dimensions, View, Text, Input } from 'weex-nuke';
import { createElement, Component, render } from 'rax';
const { height } = Dimensions.get('window');

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    //alert(height)
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}> This Is A Fixed Area </View>
        <ScrollView
          ref="vscroller"
          showsVerticalScrollIndicator={false}
          style={{ flex: 1 }}
          contentContainerStyle={{
            backgroundColor: 'red',
            width: 750
          }}
        >
          <Button size="small" type="primary" style={{ width: 200 }}>
            login
          </Button>
          <View style={styles.item}>Item1</View>
          <View style={styles.item}>Item2</View>
          <View style={styles.item}>Item2</View>
          <View style={styles.item}>Item2</View>
          <View style={styles.item}>Item2</View>
          <View style={styles.item}>Item2</View>
        </ScrollView>
      </View>
    );
  }
};
const styles = {
  container: {
    flex: 1
  },
  header: {
    height: 200,
    width: 750,
    color: '#425B81',
    backgroundColor: '#ADEADE',
    alignItems: 'center',
    justifyContent: 'center'
  },
  inputwrap: {
    height: 80
  },
  input: {
    height: 80
  },
  item: {
    height: '300rem',
    minHeight: '300rem',
    alignItems: 'center',
    justifyContent: 'center'
  },
  bottom: {
    height: 80
  },
  bottomView: {
    flex: 1,
    backgroundColor: '#ACEACE'
  },
  item: {
    height: 200,
    width: 650,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F25195'
  }
};
render(<App />);
```