本机反应中滚动视图组件轮播图与ListView渲染列表组件用法实例分析 - 行业资讯

本文实例讲述了本地反应中滚动视图组件轮播图与ListView渲染列表组件用法。分享给大家供大家参考,具体如下:

1,滚动视图

滚动视图是反应本地提供的滚动视图组件,渲染一组视图,用户可以进行滑动响应交互,其常用属性如下:

滚动的偏移量:通过event.nativeEvent.contentOffset.x可以得到水平偏移量。

　　<李>水平={bool},属性为真时,所有子视图在水平方向排列,否则在纵向排列。默认为假的。　　<李> pagingEnabled={bool},属性为真时,滚动会停留在视图尺寸整数倍位置上,即正好显示某个视图,默认为假李　　<李> scrollEnabled={bool},值为假时,视图不能滚动,默认真李　　<李> showsHorizontalScrollIndicator={bool},值为真的在滚动时会在屏幕底部显示一个滚动条,默认真李　　<李> showsVerticalScrollIndicator={bool},值为真的在滚动时显示垂直方向的滚动条,默认真的。　　<李> keyboardDismissMode=懊挥小?岸宰枇Α?滑动视图时是否隐藏软键盘,默认都不隐藏。　　<李> onContentChange={}函数,当滚动视图视图大小发生变化时调用函数。　　<李> onScroll={}函数,当滚动视图时调用函数。　　<李> onMomentumScrollStart={}函数,滚动开始调用函数。　　<李> onMomentumScrollEnd={}函数,滚动结束时调用函数。　　　　

组件所属的方法有:

　　<李> scrollTo ({x: num y: num,动画:bool}),组件视图滚动到指定x, y位置,第三个参数为是否启用动画　　<李> scrollToEnd({动画:bool}),滚动到视图末尾。　　　　

例如利用滚动视图来实现一个横幅轮播:

页面结构如下:

　　　　　　& lt;视图风格={styles.banner}比; 　　& lt; ScrollView ref=肮龆油肌彼?{真} 　　pagingEnabled={真}showsHorizontalScrollIndicator={假}> 　　renderBanner () { 　　返回zodiac.map((项目,索引)=比; 　　& lt;图像关键源=={指数}{{uri:“资产:/星座”+ item.image +的jpg}}={风格风格。itemImage}/比; 　　) 　　} 　　　　之前　　　　

在底部渲染指示点:

　　　　　　renderIndicate () { 　　让jsx=[]; 　　(让我=0;i) 　　其他}{ 　　jsx.push (& lt;文本关键={我}风格={{字形大小:15,颜色:“# ffffff}}祝辞●& lt;/Text>) 　　} 　　} 　　返回jsx; 　　} 　　　　之前　　　　

当用户滑动结束时触发滚动视图的onMomentumScrollEnd方法,调用幻灯片函数,并传递事件参数给幻灯片。通过计算得出用户滑到的当前页的索引pageIndex,其中页码的计算就是将x偏移量除以每个视图的宽度然后取整

　　　　　　幻灯片(e) { 　　让抵消=e.nativeEvent.contentOffset.x;//获取x偏移量　　让指数=Math.floor(抵消/DevWidth);//通过偏移量计算出当前页码　　this.setState ({ 　　pageIndex:指数　　}）　　} 　　　　之前　　　　

设置定时器让视图自动更换,通过setInterval让pageIndex隔一段时间自动+ 1,然后让图片偏移到页码对应的图片,令页面索引乘以每个页面宽度即为当前页面对应的偏移量:

　　　　　　凝固时间(){ 　　this.timer=setInterval()=祝辞{ 　　this.setState ((preState)=祝辞{//更新pageIndex 　　如果(preState.pageIndex>=(zodiac.length-1)){//如果页码达到上界则归零　　返回{pageIndex: 0} 　　其他}{ 　　{pageIndex: preState返回。pageIndex + 1}//否则页码加一　　} 　　});//让图片偏移到页码所对应的页面　　让抵消=this.state.pageIndex * DevWidth; 　　this.refs.scrollView.scrollTo ({x:抵消,y: 0,动画:真正}); 　　},2000) 　　} 　　　　之前　　　　

在组件销毁时清除定时器

　　　　　　componentWillUnmount () { 　　clearInterval (this.timer); 　　} 　　　　

2,列表视图

& lt; ListView>用于将一组相同类型的数据渲染到页面上,你只需要定义好数据源与单个组件如何渲染,它便会将所有数据渲染完成,例如将如下左边json数据渲染为右边图标列表: