移动开发：掌握无限制下拉刷新和触底加载的精髓

前端

2023-12-15 16:35:59

在当今快节奏的移动应用程序时代，无限制下拉刷新和触底加载已成为移动端开发人员必备的技能。它们极大地提升了用户体验，让用户能够轻松探索和获取信息，无需等待繁琐的页面重新加载。

原理解析

无限制下拉刷新和触底加载基于两个关键概念：

下拉刷新： 当用户下拉页面时，触发刷新操作，从服务器获取新数据。
触底加载： 当用户滚动页面到底部时，自动加载更多数据。

这两个功能通常结合使用，提供流畅且不间断的滚动体验。

实现方式

在 React 移动端开发中，可以使用 antd 库轻松实现无限制下拉刷新和触底加载。antd 提供了一个名为 List 的组件，它支持这两个特性。

要实现下拉刷新，需要将 onRefresh 属性与一个函数关联，该函数从服务器获取新数据。对于触底加载，需要使用 onEndReached 属性，当用户滚动到页面底部时触发。

import { List } from 'antd-mobile';

const App = () => {
  const [data, setData] = useState([]);

  const onRefresh = async () => {
    // 从服务器获取新数据
    const newData = await fetchNewData();
    setData(newData);
  };

  const onEndReached = async () => {
    // 加载更多数据
    const moreData = await fetchMoreData();
    setData(prevData => [...prevData, ...moreData]);
  };

  return (
    <List
      onRefresh={onRefresh}
      onEndReached={onEndReached}
      onEndReachedThreshold={0.5} // 滚动到页面底部 50% 时触发加载更多
      renderHeader={() => '下拉刷新'}
      renderFooter={() => '触底加载更多'}
      dataSource={data}
      renderItem={item => <List.Item>{item}</List.Item>}
    />
  );
};

export default App;

代码示例

以下是实现无限制下拉刷新和触底加载的代码示例：

import { useEffect, useState } from 'react';
import { List } from 'antd-mobile';

const App = () => {
  const [data, setData] = useState([]);
  const [refreshing, setRefreshing] = useState(false);
  const [loadingMore, setLoadingMore] = useState(false);

  useEffect(() => {
    // 初始加载数据
    fetchData();
  }, []);

  const fetchData = async () => {
    // 从服务器获取数据
    const newData = await fetchNewData();
    setData(newData);
    setRefreshing(false);
  };

  const loadMoreData = async () => {
    // 加载更多数据
    const moreData = await fetchMoreData();
    setData(prevData => [...prevData, ...moreData]);
    setLoadingMore(false);
  };

  return (
    <List
      onRefresh={fetchData}
      refreshing={refreshing}
      onEndReached={loadMoreData}
      loading={loadingMore}
      dataSource={data}
      renderItem={item => <List.Item>{item}</List.Item>}
    />
  );
};

export default App;