当前位置: 首页 > 文档资料 > Rax 中文文档 >

ScrollView

优质
小牛编辑
125浏览
2023-12-01

描述

ScrollView 是一个滚动容器,可用于列表的展示。一般情况下需要为 ScrollView 设置确定的高度来保证其正常展现。

安装

$ npm install rax-scrollview --save

属性

属性类型默认值必填描述支持
scrollEventThrottleNumber100这个属性控制在滚动过程中,scroll事件被调用的频率,用于滚动的节流
horizontalBoolean-设置为横向滚动
showsHorizontalScrollIndicatorBooleantrue是否允许出现水平滚动条
showsVerticalScrollIndicatorBooleantrue是否允许出现垂直滚动条
onEndReachedThresholdNumber500设置加载更多的偏移
onEndReachedFunction-滚动区域还剩onEndReachedThreshold的长度时触发
onScrollFunction-滚动时触发的事件,返回当前滚动的水平垂直距离

注:基础属性、事件及图片含义见组件概述

方法

scrollTo({x:number,y:number})

参数

参数类型为 Object,包含以下属性:

属性类型默认值必填描述
xNumber-横向的偏移量
yNumber-纵向的偏移量

示例

基础用法

import { createElement, render } from 'rax';
import DriverUniversal from "driver-universal"
import View from 'rax-view';
import ScrollView from 'rax-scrollview';

function Thumb() {
  return (
    <View style={styles.button}>
      <View style={styles.box} />
    </View>
  );
}

let THUMBS = [];
for (let i = 0; i < 20; i++) THUMBS.push(i);
let createThumbRow = (val, i) => <Thumb key={i} />;

function App () {
  return (
    <View style={styles.root}>
      <View style={{ ...styles.container, ...{ height: 500 } }}>
        <ScrollView>
          {THUMBS.map(createThumbRow)}
        </ScrollView>
      </View>
    </View>
  );
}

let styles = {
  root: {
    width: 750,
    paddingTop: 20
  },
  container: {
    padding: 20,
    borderStyle: 'solid',
    borderColor: '#dddddd',
    borderWidth: 1,
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 10,
  },
  button: {
    margin: 7,
    padding: 5,
    alignItems: 'center',
    backgroundColor: '#eaeaea',
    borderRadius: 3,
  },
  box: {
    width: 64,
    height: 64,
  }
};

render(<App />, document.body, { driver: DriverUniversal });

固定顶部元素

import { createElement, render } from 'rax';
import DriverUniversal from "driver-universal"
import View from 'rax-view';
import Text from 'rax-text';
import ScrollView from 'rax-scrollview';

function Thumb() {
  return (
    <View style={styles.button}>
      <View style={styles.box} />
    </View>
  );
}

let THUMBS = [];
for (let i = 0; i < 20; i++) THUMBS.push(i);
let createThumbRow = (val, i) => <Thumb key={i} />;

function App () {
  return (
    <View style={styles.root}>
      <View style={{ ...styles.container, ...{ height: 500 } }}>
        <ScrollView>
          <View style={styles.sticky}>
            <Text>Header</Text>
          </View>
          {THUMBS.map(createThumbRow)}
        </ScrollView>
      </View>
    </View>
  );
}

let styles = {
  root: {
    width: 750,
    paddingTop: 20
  },
  sticky: {
    position: 'sticky',
    top: 0,
    height: 64,
    margin: 7,
    backgroundColor: '#cccccc',
    textAlign: 'center',
    justifyContent: 'center'
  },
  container: {
    padding: 20,
    borderStyle: 'solid',
    borderColor: '#dddddd',
    borderWidth: 1,
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 10,
  },
  button: {
    margin: 7,
    padding: 5,
    alignItems: 'center',
    backgroundColor: '#eaeaea',
    borderRadius: 3,
  },
  box: {
    width: 64,
    height: 64,
  }
};
render(<App />, document.body, { driver: DriverUniversal });

横向滚动

import { createElement, render } from 'rax';
import DriverUniversal from "driver-universal"
import View from 'rax-view';
import ScrollView from 'rax-scrollview';

function Thumb() {
  return (
    <View style={styles.button}>
      <View style={styles.box} />
    </View>
  );
}

let THUMBS = [];
for (let i = 0; i < 20; i++) THUMBS.push(i);
let createThumbRow = (val, i) => <Thumb key={i} />;

function App () {
  return (
    <View style={styles.root}>
      <View style={styles.container}>
        <ScrollView horizontal={true} style={{height: 200}}>
          {THUMBS.map(createThumbRow)}
        </ScrollView>
      </View>
    </View>
  );
}

let styles = {
  root: {
    width: 750,
    paddingTop: 20
  },
  container: {
    padding: 20,
    borderStyle: 'solid',
    borderColor: '#dddddd',
    borderWidth: 1,
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 10,
  },
  button: {
    margin: 7,
    padding: 5,
    alignItems: 'center',
    backgroundColor: '#eaeaea',
    borderRadius: 3,
  },
  box: {
    width: 64,
    height: 64,
  }
};
render(<App />, document.body, { driver: DriverUniversal });