react实现滚动加载

首先相关依赖包

npm i react-infinite-scroll-component

引入

import InfiniteScroll from 'react-infinite-scroll-component'

import InfiniteScroll from 'react-infinite-scroll-component'


const App = () => {
  const [shoplist, setshoplist] = useState([]);
  const [xuanlist, setxuanlist] = useState([]);
  const [xiala, setxiala] = useState(true);
  const requestList =  () => {
    let autotime = 3
    const auto_timetimer = setInterval(async() => {
      autotime -= 1
      if (autotime <= 0) {
        let { data } = await axios.get('/data2.json')
        let copy = [...xuanlist, ...data.result.list]
        setshoplist([...copy])
        setxuanlist([...copy])
        setxiala(false)
        clearInterval(auto_timetimer)
      }
    }, 1000)
  }
  return (
    <div id='app' onChange={(ev) => appwidth(ev)}>
      <div className='app-boonm'>
        <div className='app-boonm-three'>
          <div className='app-boonm-one'>
            <InfiniteScroll
              dataLength={xuanlist.length}
              next={requestList}
              hasMore={xiala}
              endMessage={
                <p style={{ textAlign: 'center' }}>
                  <b>Yay! You have seen it all</b>
                </p>
              }
              loader={<h4>Loading...</h4>}
            >
              {
                xuanlist.map(item => (
                  <div key={item._id} className='pin'>
                    <img style={{ width: "100%" }} alt='123' src={'/img/' + item.productImage} />
                    <div>{item.productName}</div>
                    <div>￥{item.salePrice}</div>
                    <button className='btn' onClick={() => console.log(item)}>加入购物车</button>
                  </div>
                ))
              }
            </InfiniteScroll>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

实现效果：