ScrollView和FlatList实现滑动列表

ScrollView和FlatList实现滑动列表


FlatList已经介绍过了,不详细介绍了,就是用来实现列表渲染的绝佳component。

介绍一下ScrollView,是一个包装滚动平台,还集成了触摸锁定的响应工具,可以用来做翻页、轮播图等等滑动视图。

滑动列表的实现,是把ScrollView设置水平滑动模式,然后内部嵌套一个FlatView同样也设置水平布局,然后渲染子视图。

有一个特殊属性可以提高滚动性能,removeClippedSubviews:当此属性为true时,这个可以提升大列表的滚动性能。默认值为true,所以子视图overflow样式需要设为hidden。

示例代码:

render(){

return(

<ScrollView style={styles.scrollViewStyle}

horizontal={true} // 水平方向

showsHorizontalScrollIndicator={false} // 隐藏水平指示器

>

<FlatList

data={this.listImg}

renderItem={ (item)=> { } }

horizontal={true}

/>

);

}

常用方法:

scrollTo:(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean)滚动到指定的x, y偏移处。第三个参数为是否启用平滑滚动动画。

目前只使用这两个组件完成了一个滚动关注用户的视图,有不足之处的请指教,如有更好的见解可以一起讨论。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容