项目背景
项目中有个需求需要删除一个Listview的item,但是有问题。是这样的,我有10条数据,屏幕只能显示5条,所以我滑动到最后一条,选择删除,然后刷新state,但是删除的那个item没了,留出来一块空白,没有其他数据补位的,用手一触碰屏幕,整个listview都会一闪烁,布局又排正好了。
js代码
<ListView
ref="_listView"
dataSource={this.state.dataSource}
renderRow={this.renderItemView.bind(this)}
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this.onRefresh.bind(this)}
tintColor="#ff0000"
title="Loading..."
titleColor="#00ff00"
colors={['#ff0000', '#00ff00', '#0000ff']}
progressBackgroundColor="#ffffff"
/>}
/>
心想着如果不能正确显示,起码在删除后把整个列表滚动到最后边也行,所以搜索了一下Listview的Api,有一个scrollTo()的方法,于是就抱着试试看的态度
this.refs._listView.scrollTo({x: 0, y: 0, animated: true});
意想不到的事情发生了,列表没有滑动到最上边,但是没有空白的view了,上边的会自动填充到下边了。于是我把这行复制了一次,调用了两次这个方法
this.refs._listView.scrollTo({x: 0, y: 0, animated: true});
this.refs._listView.scrollTo({x: 0, y: 0, animated: true});
列表滑动到最上边了!
谨记这次的开发教训,毕竟React-native现在还不成熟。
网友评论