RN ScrollView组件

ScrollView组件允许用户左、右或者上、下滑动来查看原来显示在屏幕外的内容

一、ScrollView组件常用属性
1.horizontal：布尔类型属性，当他为true时，ScrollView的所有子组件将会水平排列，false为垂直排列
2.showsHorizontalScrollIndicator:布尔类型属性，当他为true时，水平方向会展示一个滑动指示器
3.showsVerticalScrollIndicator：布尔类型属性，当他为true时，垂直方向会展示一个滑动指示器
4.onContentSizeChange是一个回调函数，当ScrollView组件的容器View宽、高被改变时，这个回调函数将被执行
5.onScroll是一个回调函数，当ScrollView组件被滑动时，每一帧的画面改变都会触发一次该函数

二、ScrollView组件常用方法
ScrollView组件提供了一个scrollTo函数，让当前的ScrollView组件快速的定位到指定屏幕位置

 this.refs.scrollView.scrollTo({x:0,                                           //欲定位位置横坐标y:contentHeight-this.state.contentHeight0,     //欲定位位置纵坐标animated:true                                 //是否需要动画效果});

scrollToEnd函数让当前的ScrollView组件快速的定位到ScrollView底部，它接受一个bool类型参数，用来控制定位时是否有动画效果

this.refs.scrollView.scrollToEnd(true);

实例

/*此函数会在ScrollView内部可滚动内容的视图发生变化时调用。*/ContentSizeChange(contentWidth, contentHeight){/*发送或接收消息时定位到滚动区域底部*/if(contentHeight>this.props.chatAreaHeight&&this.props.chatAreaHeight!==null&&this.props.sendingMsg){this.refs.scrollView.scrollToEnd(true);}/*拉到顶部获取新数据后，定位到之前的位置*/if(this.props.isLoading){setTimeout(()=>{this.refs.scrollView.scrollTo({x:0,y:contentHeight-this.state.contentHeight0,animated:false});this.setState({contentHeight0:contentHeight})},50)}else {this.setState({contentHeight0:contentHeight,})}}

三、RefreshControl组件
RefreshControl是专门为ScrollView服务的组件。当ScrollView被拉到顶部（y:0）时，如果给ScrollView的refreshControl属性赋值一个RefreshControl组件，则会显示这个RefreshControl组件。开发者通常会用它从网络侧获取最新的数据，并在获取到最新数据后让RefreshControl组件消失

<ScrollView style={chatArea.scrollView}onContentSizeChange={this.ContentSizeChange.bind(this)}automaticallyAdjustContentInsets={true}className={'chatArea'}refreshControl={<RefreshControl refreshing={isRefreshing}tintColor='#ff0000'title='Loading...'colors={['#ff0000','#00ff00','#0000ff']}progressBackgroundColor='#ffff00'onRefresh={this._onRefresh}/>}ref='scrollView'></ScrollView>

onRefresh是回调函数，当ScrollView拉到顶部时会执行
refreshing是布尔类型的参数，控制RefreshControl组件是否展示

实例

_onRefresh(){this.setState({isRefreshing:true});this.props.loadMore().then(()=>{this.setState({isRefreshing:false});});}

四、、使用时注意事项

//ScrollView 必须有一个确定的高度才能正常工作,对于 ScrollView 来说，它就是将一些不确定高度的子组件装进确定高度的容器//初始化的2种方式
1. 给 ScrollView 中加 [flex:1]2. 直接给该 ScrollView 设置高度（不建议），因为它会根据内部组件自动延伸自己的尺寸到合适的大小

RN ScrollView组件相关推荐

小程序高级电商前端第2周深入理解REST API开发规范开启三端分离编程之旅＜二＞----scroll-view组件的灵活应用、async和await问题探讨、spu-scroll自定义组件
前言: 转眼距离上一次写博文又过去一个月了,今年的博文节奏已经彻底被打破了: 真的是有心无力了,其原因在之前也提到过,组织架构调整,各种考核(跨领域性质的考核)实行末尾淘汰制,说不出的酸楚,不过换个心 ...
scroll-view组件bindscroll实例应用：自定义滚动条
我们知道scroll-view组件作为滑动控件非常好用,而有时候我们想放置一个跟随滚动位置来跟进的滚动条,但又不想用滚动条api该怎么办呢?(当然是自己写一个呗还能怎么办[自黑冷漠脸]) 嗯,没错.自 ...
RN ScrollView滑动不到底部问题
先怀疑是RN版本问题:(根据创建不一样的rn项目demo来进行测试,和项目一致的版本来测试,最终问题锁定在我们自己修改的代码上.) react-native init projectname 创建RN ...
小程序横向scroll-view组件自动滚动到某个view
先看下效果 scroll-view一般用于做横向侧滑动栏目,分类等等,在这里我用改组件做时间分栏. wxml部分 <view class="scroll_box">&l ...
微信小程序scroll-view组件套textarea框内文字和placeholder上飘解决
wxml如下,此时scroll-view组件内的textarea中输入的文字和placeholder的内容在滚动屏幕时会上飘 <scroll-view style="width:100 ...
微信小程序 scroll-view组件实现列表页实例代码
这篇文章主要介绍了微信小程序 scroll-view组件实现列表页实例代码的相关资料,scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端 ...
Cocos Creater中 ScrollView 组件的使用
1.画布大小750*1334 2.scrollView里的 content节点的大小之前设置的为750*1334 结果: 完全划不动后来发现: 实际上,content节点里装的是需要展示的内容,sc ...
微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.6 scroll-view组件，在小程序中如何实现滚动锚定，如何渲染一个滚动的长列表？
scroll-view 是一个可以滚动的视图区域的容器组件. 一.重要属性 scroll-view 的滚动属性,实现了两套功能左右或上下滚动下拉更新 1.1 与滚动有关的属性: scroll-x ...
RN自定义组件封装 - 播放类似PPT动画
1. 前言近日,被安排做一个开场动画的任务.虽然RN提供了Animated来自定义动画,但是本次动画中的元素颇多,交互甚烦...在完成任务的同时,发现很多步骤其实是重复的,于是封装了一个小组件记录一 ...

RN ScrollView组件

RN ScrollView组件相关推荐

最新文章

热门文章