【问题标题】:How can I paginate my scrollview when the user scrolling until end?当用户滚动到结束时,如何对滚动视图进行分页?
【发布时间】:2019-09-11 13:44:25
【问题描述】:

我想在我的滚动视图中显示事务列表,但是当用户滚动它直到结束时,另一个请求将开始并在我的视图中添加另一个页面的事务。我该怎么做呢

这是我的第一个请求,它正在获取交易的第一页

        let { data } = await client.get('/coins/2/transactions');
        let transactions = {};
        transactions = data.map(e => {
          return {
            address: e.address,
            amount: e.amount,
            blockhash: e.blockhash,
            confirmations: e.confirmations,
            status: e.status,
            timestamp: e.timestamp,
            txid: e.txid
          };
        })

        this.setState({ transactions });
      }

然后我添加了另一个功能,即获取下一页。

async getNextCursor(cursor){
          let {data} = await client.get('/coins/2/transaction/?cursor=' + cursor)
          let transactions = {};
        transactions = data.map(e => {
          return {
            address: e.address,
            amount: e.amount,
            blockhash: e.blockhash,
            confirmations: e.confirmations,
            status: e.status,
            timestamp: e.timestamp,
            txid: e.txid
          };
        })
        return transactions
      }

如何在滚动结束时运行此请求并获取其他事务并添加到我的事务状态中也显示它?

注意:我的请求给了我 has_more(bool) 和 next_cursor(int) 属性

【问题讨论】:

    标签: javascript reactjs react-native scrollview


    【解决方案1】:

    这是一个粗略的代码示例

    <ScrollView
          scrollEventThrottle={16}
          onScroll={handlePagination} 
      />
    

    使用函数切换特定点上的数据,

    handlePagination=(event)=>{
    
    const currentY = event.nativeEvent.contentOffset.y
    
     if(currentY==BOTTOM){
      const data = this.getNextCursor();
      this.setState({ data });
     }
    
    }
    

    BOTTOM是要切换数据时的高度变量。

    【讨论】:

      猜你喜欢
      • 2015-12-08
      • 1970-01-01
      • 1970-01-01
      • 2019-10-27
      • 1970-01-01
      • 1970-01-01
      • 2023-04-11
      • 1970-01-01
      • 2017-01-06
      相关资源
      最近更新 更多