noder-react-native icon indicating copy to clipboard operation
noder-react-native copied to clipboard

列表个数比较少的时候,会有个loading一直在闪

Open jShi-git opened this issue 8 years ago • 3 comments

如题

列表项比较多的时候没有这个问题出现

测试环境,ios,dev模式

测试效果如下图

11 pic

10 pic

抓包看请求发现,进入列表有的时候会请求两次同一页的数据,如果列表过少或列表为空,就会狂刷接口,page值递增,也不能说递增,有重复请求的递增,而且有丢页的现象 -1

jShi-git avatar May 25 '16 13:05 jShi-git

恩恩,这是个bug, 我待会看看,

osdio avatar May 25 '16 14:05 osdio

@soliury

这是react native本身的组件兼容bug,可以看下这个 http://www.codeismoney.com/ReactNative/262_React-Native-ListView-onEndReached.html

http://stackoverflow.com/questions/30262404/react-native-infinite-scroll

jShi-git avatar May 26 '16 02:05 jShi-git

@soliury

自己改了下,效果还可以,不用改页面结构,参考上面贴的stackoverflow的帖子 修改 layouts/TopicList.js

constructor(props) { super(props); var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { isLoadingTail: false, ds: ds.cloneWithRows(props.data) }; this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this); } getSCData() { const {tab, limit, page, actions, data} = this.props; if (data.length) { actions.getTopicsByTab(tab, { page: page + 1, limit }); this.setState({ isLoadingTail: false }); } } _onEndReached() { if (this.state.isLoadingTail) { return; } this.setState({ isLoadingTail: true, dataSource: this.getSCData() }); console.log('onEndReached', this.state.isLoadingTail); }

jShi-git avatar May 26 '16 02:05 jShi-git