ScrollView
优质
小牛编辑
125浏览
2023-12-01
描述
ScrollView 是一个滚动容器,可用于列表的展示。一般情况下需要为 ScrollView 设置确定的高度来保证其正常展现。
安装
$ npm install rax-scrollview --save
属性
属性 | 类型 | 默认值 | 必填 | 描述 | 支持 |
---|---|---|---|---|---|
scrollEventThrottle | Number | 100 | ✘ | 这个属性控制在滚动过程中,scroll事件被调用的频率,用于滚动的节流 | |
horizontal | Boolean | - | ✘ | 设置为横向滚动 | |
showsHorizontalScrollIndicator | Boolean | true | ✘ | 是否允许出现水平滚动条 | |
showsVerticalScrollIndicator | Boolean | true | ✘ | 是否允许出现垂直滚动条 | |
onEndReachedThreshold | Number | 500 | ✘ | 设置加载更多的偏移 | |
onEndReached | Function | - | ✘ | 滚动区域还剩onEndReachedThreshold 的长度时触发 | |
onScroll | Function | - | ✘ | 滚动时触发的事件,返回当前滚动的水平垂直距离 |
注:基础属性、事件及图片含义见组件概述。
方法
scrollTo({x:number,y:number})
参数
参数类型为 Object
,包含以下属性:
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
x | Number | - | ✘ | 横向的偏移量 |
y | Number | - | ✘ | 纵向的偏移量 |
示例
基础用法
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 });