Question

当“滚动”位于最底部时，函数getUsers ()被调用。如何设置滚动使其不到达滑块的末端，并调用getUsers ()函数。那将有无限滚动效果。我的意思是像这里的滚动效果：https://codesandbox.io/s/ww7npwxokk。当滚动到达底部时，它会返回。

此处的代码：https://stackblitz.com/edit/react-nq8btq

import './style.css';
import axios from 'axios';

class App extends Component {
  constructor() {
    super();
    this.state = {
      users: [],
      page: 1
    };
  }

  componentDidMount() {
    this.getUsers();
  }

  getUsers = () => {
    axios({
      url: `https://jsonplaceholder.typicode.com/users`,
      method: "GET"
    })
    .then(res => { 
      this.setState({
        users: res.data
      });
    })
    .catch(error => {
      console.log(error);
    }) 
  }

  scroll = (e) => {
    const page = this.state.page;
    const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
    if (bottom) { 
      alert('bottom');
      this.getUsers()

      this.setState({
        page: this.state.page + 1
      })
    }

    const top = e.target.scrollTop; 

     if(top === 0 && page > 1) {
        alert('I AM AT THE TOP');

         this.setState({
          page: this.state.page - 1
        })
      }
  }

  render() {
    console.log(this.state.page)
     console.log(this.state.users)
    return (
      <div>
         <div onScroll={this.scroll} className="container">
            <ul>
              {this.state.users.map((user, index) => 
                <li>
                  {user.name}
                </li>   
              )}
            </ul>
         </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 1

在这里，我已经更新了您的代码，略有简化，但是大多数情况下您的代码都带有要点。

            if(fragment.isVisible()){
                //your code.//
            }

Answer 2

您需要做的就是决定何时致电获取用户。

即如果您希望在已经滚动了70％的高度时调用它，则该因子将为0.3（30％）

每当滚动超过70％时，就会调用this.getusers()。

查看我如何修改您写的相同条件。

其余代码保持不变

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import axios from 'axios';

class App extends Component {
  constructor() {
    super();
    this.state = {
      users: [],
      page: 1
    };
  }

  componentDidMount() {
    this.getUsers();
  }

  getUsers = () => {
    axios({
      url: `https://jsonplaceholder.typicode.com/users`,
      method: "GET"
    })
    .then(res => { 
      this.setState({
        users: res.data
      });
    })
    .catch(error => {
      console.log(error);
    }) 
  }

  scroll = (e) => {
    const page = this.state.page;
    const bottom = e.target.scrollHeight - e.target.scrollTop < e.target.clientHeight-0.3*e.target.clientHeight;
    if (bottom) { 
      alert('bottom');
      this.getUsers()

      this.setState({
        page: this.state.page + 1
      })
    }

    const top = e.target.scrollTop; 

     if(top === 0 && page > 1) {
        alert('I AM AT THE TOP');

         this.setState({
          page: this.state.page - 1
        })
      }
  }

  render() {
    console.log(this.state.page)
     console.log(this.state.users)
    return (
      <div>
         <div onScroll={this.scroll} className="container">
            <ul>
              {this.state.users.map((user, index) => 
                <li>
                  {user.name}
                </li>   
              )}
            </ul>
         </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 3

此lib应该为您解决问题

$ yarn add react-infinite-scroller

非常容易实现

<InfiniteScroll
  pageStart={0}
  loadMore={this.getUsers()}
  hasMore={this.state.hasMoreUsers}
  loader={<div key={0}>loading ...</div>}
> 
  <li>
    {user.name}
  </li>
</InfiniteScroll>

别忘了将lib导入到您的组件文件中

import InfiniteScroll from 'react-infinite-scroller';

使用无限滚动调整滚动高度

3 个答案: