ListView分页加载的疑问



  • 上拉加载和下拉刷新我都弄明白了,就是不明白这个dataSource,假如一开始加载分页数据的第一页,然后一般是这样dataSource={this.state.dataSource.cloneWithRows(datas),如果上拉加载第二页的时候,第二页的数据就把前面的数据覆盖了吧?我实验了一下,的确是这样啊,肯定我写错了,求指教?


  • administrators

    覆盖不覆盖 取决于你自己怎么处理先前的数据和新加的数据

    比如原先是个数组 var a = [1,2,3]

    如果a = [4,5,6]
    那当然覆盖了

    如果a = a.concat([4,5,6]);
    此时a的值为[1,2,3,4,5,6],显然就不是覆盖了



  • @sunnylqm 说:

    覆盖不覆盖 取决于你自己怎么处理先前的数据和新加的数据

    比如原先是个数组 var a = [1,2,3]

    如果a = [4,5,6]
    那当然覆盖了

    如果a = a.concat([4,5,6]);
    此时a的值为[1,2,3,4,5,6],显然就不是覆盖了

    哦,跟我预计的差不多,我现在在state里新建了一个变量data,然后每次翻页的时候concat,刷新的时候清空,看起来运行正常,这样做对吗?总觉得维护了2份相同的数据,一般大概是怎么写的啊?



  • 兄弟,你的加载枫叶数据是如何实现的,求指教??? 谢谢啦



  • @sunny_angel 说:

    兄弟,你的加载枫叶数据是如何实现的,求指教??? 谢谢啦

    一种方法就是在state里建一个data存所有的数据,另一种方法是存在redux里的reducer,具体你可以看我的这个文章,文章后面有github地址



  • @kaenry 您好,像我这个后台每次请求获取到的是30条数据,具体怎么实现分页呢? 看了您的文章还是没有头绪?请指教指教,谢谢了
    action中:
    function findMyWebData(page) {
    let count = 30;
    return dispatch => {
    return new FetchRemote()._fetch(
    url: "/web-datas/search-my-datas?__sort=reportAt desc&count=" + count + "&page=" + page,
    });
    }
    }



  • @sunny_angel 说:

    @kaenry 您好,像我这个后台每次请求获取到的是30条数据,具体怎么实现分页呢? 看了您的文章还是没有头绪?请指教指教,谢谢了
    action中:
    function findMyWebData(page) {
    let count = 30;
    return dispatch => {
    return new FetchRemote()._fetch(
    url: "/web-datas/search-my-datas?__sort=reportAt desc&count=" + count + "&page=" + page,
    });
    }
    }

    没有用redux之类的话我写一下伪代码:(这个是最笨的方法)

    page = 0;
    ...
    constructor(props) {
            super(props);
    
            let ds = new ListView.DataSource({
                rowHasChanged: (r1, r2) => r1 !== r2,
            });
    
            this.state = {
                ds: ds,
                data: [],
                refreshing: false,
            };
        }
    
    reander() : 
    
    <ListView dataSource={this.state.repos.cloneWithRows(this.state.data)} renderRow={this._renderRow.bind(this)}
                                enableEmptySections={true}
                                onEndReached={this._loadMore.bind(this)} // 到底部自动加载下一页
                                onEndReachedThreshold={10}
                                initialListSize={3}
                                refreshControl={
                                  <RefreshControl // 下拉刷新
                                    refreshing={this.state.refreshing}
                                    onRefresh={this._onRefresh.bind(this)}
                                    colors={['#00B51D']}
                                    titleColor='#00B51D'
                                  />
                                }
                              />
    
    _loadMore():
    page++;
    const fetchData = findMyWebData(page);
    this.setState({
      data: this.state.data.concat(fetchData.items);
    })
    


  • 基础教程里面就有做一个中间变量哦,估计没好好看



  • @kaenry 0_1471917194963_error.jpg
    您好,我这样子以后拉到底部它就报错了,而且也没有进行下一页面的加载,退出以后再进去又可以见第二个页面的内容; 但是还是一直报那个错; 还有就是render里面如果不加这行代码 this.state.data = this.state.data.concat(this.state._data); 请求不到数据. 请您再帮看看,麻烦了

    var page = 1;

    constructor(props) {
    super(props);
    let dataSource= new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2,});
    this.state = {
    dataSource:dataSource,
    data: [],
    refreshing: false,
    _data: [],
    };
    }

    //获取网络数据
    componentDidMount() {
    this.props.actions.findMyRepairs(page).then((responseData) => {
    this.setState({
    dataSource: this.state.dataSource.cloneWithRows(responseData.content),
    loaded: true,
    _data: responseData.content
    });

        }).catch(error => {
            this.setState({
                loadedError: true,
                loaded: true,//请求完成标志
            })
        }).done();
    
    }
    

    render() {
    this.state.data = this.state.data.concat(this.state._data);

        return (
            <View style={[CommonStyles.background,{marginBottom:10}]}>
                <ListView
                    //放网络数据
                    dataSource={this.state.dataSource.cloneWithRows(this.state.data)}
                    renderRow={(this._renderRow).bind(this)}
                    onScroll={this.onScroll}
                    initialListSize={1}
                    onEndReachedThreshold={10}
                    onEndReached={this._handleLoadMore.bind(this)}
                    refreshControl={
                        <RefreshControl
                          refreshing={this.state.refreshing}
                          onRefresh={this._onRefresh.bind(this)}
                          color="#8CD790"
                        />
                    }
                >
                </ListView>
    
            </View>
        )
    }
    

    _onRefresh() {
    // 刷新
    page++;
    this.state.data = [];
    this.props.actions.findMyRepairs(page);
    }

    _handleLoadMore() {
        // 加载更多
        page++;
        const fetchData=this.props.actions.findMyRepairs(page);
        this.setState({
            data: this.state.data.concat(fetchData.items),
        })
    }
    

    /**
    * List列表Item
    */
    _renderRow(rowData, sectionID:number, rowID:number) {
    var repairsStatus = repairStats[rowData.receiptStatus] || '';
    if (rowData.repairAttachs) {
    var photoView = [];
    for (var i = 0; i < rowData.repairAttachs.length; i++) {
    let url = localPath + rowData.repairAttachs[i].uuidCodeText.url;

                photoView.push(
                    <TouchableOpacity key={i} onPress={()=>this.onPressImage(url,rowData)}>
                        <Image
                            style={styles.imageStyle}
                            resizeMode='cover'
                            source={{uri:url}}
                        />
                    </TouchableOpacity>
                );
            }
        }
    }


  • @sunny_angel 你不能完全照抄我的啊,我不知道你的代码,只是大概写一下,你需要把_handleLoadMore的方法改成你取数据的方式
    比如:

    this.props.actions.findMyRepairs(page+1).then((responseData) => {
    this.setState({
    loaded: true,
    _data: this.state._data.concat(responseData.content)
    });
    


  • @kaenry
    可以了,只是退出listView列表页面没有退出程序的时候再进入列表,列表没有数据,这是为什么呀?


登录后回复