ScrollView 可滚动容器

API#

一个包装了滚动操作的组件。一般情况下需要一个确定的高度来保证 ScrollView 的正常展现。

ScrollView#

属性	说明	类型	默认值
horizontal	是否横向	boolean	false
scrollEventThrottle	在滚动过程中，scroll事件被调用的频率（默认值为100），用于滚动的节流	number	100
showsHorizontalScrollIndicator	是否显示水平滚动条	boolean	true
showsVerticalScrollIndicator	是否显示垂直滚动条	boolean	true
onEndReachedThreshold	设置加载更多的偏移	string	500rem
onEndReached	滚动到底部时的事件（diff 为 onEndReachedThreshold)	event	无

代码演示

预览二维码


/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text , ScrollView} from 'nuke-components';
import {mount} from 'nuke-mounter';


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

    render() {
        return (
            <ScrollView style={style.scroller}  onEndReachedThreshold={300} onEndReached={()=>{}}>
                {/* your code */}
                <View style={style.item}>第1个</View>
                    <View style={style.item}>第2个</View>
                    <View style={style.item}>第3个</View>
                    <View style={style.item}>第4个</View>
                    <View style={style.item}>第5个</View>
                    <View style={style.item}>第6个</View>
                    <View style={style.item}>第7个</View>
                    <View style={style.item}>第8个</View>
                    <View style={style.item}>第9个</View>
                    <View style={style.item}>第10个</View>
                    <View style={style.item}>第11个</View>
                    <View style={style.item}>第12个</View>
            </ScrollView>
        )
    }
}
const style={
    scroller:{
      backgroundColor:'#ffffff'  
    },
    item:{
        height:'200rem',
        borderBottomStyle:'solid',
        borderBottomWidth:'1rem',
        borderBottomColor:'#e8e8e8'
    }
}
mount(<App/>, mountNode);

按钮类型

普通按钮。