前言
遇到一个需求,需要做到一个2行列表的滑动,并且要求有底部的指示器,实际就是一个 banner ,由于原本代码是每行4个,分成2行,无法滚动,现在要在原有基础上改造成一行5个可滚动,故而没有大动代码,只是在外层嵌套 ScrollView
,利用滚动的属性模拟出了 banner 的效果:
实现
初始偏移量
方案的主要思路在于 ScrollView 的滚动监听,每次滚动开始之前,通过 onScrollBeginDrag
方法初始化总的偏移量:
onScrollBeginDrag = {
event => {
this.setState({
totalOffset:0
})
}
}
滚动过程
在滚动过程中,滚动开始前onScrollBeginDrag
执行,然后可能有一个或多个 onScroll
执行,拖拽动作结束之后会执行 onScrollEndDrag
,但是此时 onScroll
还可能执行,因为拖拽完成之后页面可能因为惯性继续滑。
关于 React-Native
触摸事件的生命周期,这里有一篇文章可以了解下:
偏移量获取
通过 event.nativeEvent.contentOffset.x
拿到当前一个 onScroll 的偏移量,
计算总偏移,刷新UI
因为在 onScrollEndDrag
后,仍旧有 onScroll
事件,故而没有使用 onScrollEndDrag
中判断累计滑动的方式来实现,而是在 onScroll
中计算。
通过拿取当前onScroll
中的event.nativeEvent.contentOffset.x
叠加到总偏移量中,如果总偏移量(多个 onScroll 偏移量的总和) 超过单个 item宽度或者单个 onScroll 偏移量大于 item宽度,代表滑动到新的页面了,需要更新底部圆点指示器的颜色(通过改变state中curPageIndex
的值):
onScroll = { event => {
// 拿到当前一次滚动的x偏移量
const currentOffset = event.nativeEvent.contentOffset.x;
const dif = currentOffset - (this.offset || 0);
//由于一次滚动可能有多个onScroll事件,所以需要拿到当前总的偏