ReactNative之ScrollView(九)

当ScrollView的内容超出自己的尺寸，就可以滚动。

一、ScrollView的常用属性

scrollEventThrottle={1}
ScrollView被调用的频率（每秒）。默认值为0，每次滚动，只调用一次

contentOffset={{x:0,y:10}}
设置初始坐标。在RN中,滚动的时候,不会去直接修改scrollView.props.contentOffset

horizontal={true}
默认false，自视图会在垂直方向排列

pagingEnabled={true}
默认false，是否有整页的效果

showsHorizontalScrollIndicator={false}
默认true，是否添加水平方向滚动条
showsVerticalScrollIndicator={false}
默认true，是否添加垂直方向滚动条

二、ScrollView常见事件

• 合成事件：e，原生App产生事件的对象
• 合成事件对象事件有个原生事件对象：e.nativeEvent
• 原生事件对象中一般有你想要的属性

// 滚动中
onScroll={this._onScroll.bind(this)}
scrollEventThrottle={1}
// 开始滚动
onMomentumScrollBegin={this._onMomentumScrollBegin.bind(this)}
// 结束滚动
onMomentumScrollEnd={this._onMomentumScrollEnd.bind(this)}
// 开始拖拽
onScrollBeginDrag={this._onScrollBeginDrag.bind(this)}
// 结束拖拽
onScrollEndDrag={this._onScrollEndDrag.bind(this)}

代码示例

    _onScroll(e){
        // 获取原生事件
        var nativeEvent =  e.nativeEvent;
        var contentOffset = nativeEvent.contentOffset;
    }
    // 开始滚动的时候就会调用
    _onMomentumScrollBegin(){
        console.log('_onMomentumScrollBegin')
    }
    // 滚动结束的时候调用,拖拽的时候会有惯性,惯性结束的时候就会执行
    _onMomentumScrollEnd(){
        console.log('_onMomentumScrollEnd')
    }
    // 开始拖拽的时候调用
    _onScrollBeginDrag(){
        console.log('_onScrollBeginDrag')
    }
    // 结束拖拽的时候调用
    _onScrollEndDrag(){
        console.log('_onScrollEndDrag')
    }
    render(){
        return (
            <ScrollView style={{flex:1}}
                        onScroll={this._onScroll.bind(this)}
                        scrollEventThrottle={1}
                        onMomentumScrollBegin={this._onMomentumScrollBegin.bind(this)}
                        onMomentumScrollEnd={this._onMomentumScrollEnd.bind(this)}
                        onScrollBeginDrag={this._onScrollBeginDrag.bind(this)}
                        onScrollEndDrag={this._onScrollEndDrag.bind(this)}
                        ref="scrollView"
                        contentOffset={{x:0,y:10}}
            >
            </ScrollView>
        )
    }