taro开发小程序使用useReachBottom实现刷新功能

在 Taro 中，可以使用 `useReachBottom` hook 来监听页面滚动到底部的事件，从而实现上拉加载更多的功能。

以下是一个简单的示例代码：

import Taro, { useState, useEffect, useReachBottom } from '@tarojs/taro';
import { View } from '@tarojs/components';

function MyPage() {
  const [dataList, setDataList] = useState([]);
  const [page, setPage] = useState(1);
  const [size, setSize] = useState(10);

  useEffect(() => {
    // 页面加载时，执行一次上拉加载
    loadMore();
  }, []);

  useReachBottom(() => {
    // 监听到达底部事件，执行上拉加载
    loadMore();
  });

  async function loadMore() {
    // 模拟异步加载数据
    const newData = await loadData(page, size);
    setDataList([...dataList, ...newData]);
    setPage(page + 1);
  }

  async function loadData(page, size) {
    // 模拟异步加载数据
    return new Promise((resolve) => {
      setTimeout(() => {
        const newData = Array.from({ length: size }, (_, i) => ({ id: (page - 1) * size + i, text: `数据${(page - 1) * size + i}` }));
        resolve(newData);
      }, 1000);
    });
  }

  return (
    <View>
      {dataList.map((data) => (
        <View key={data.id}>{data.text}</View>
      ))}
    </View>
  );
}

export default MyPage;

在上面的代码中，我们使用了 `useState` hook 来管理数据状态，使用 `useEffect` hook 来在页面加载时执行一次上拉加载，使用 `useReachBottom` hook 来监听到达底部事件，并在事件回调函数中执行上拉加载。同时，我们还编写了 `loadData` 方法来模拟异步加载数据的过程，并在加载完成后使用 `setDataList` 方法来更新数据状态。

最后，我们在页面的 JSX 代码中渲染数据列表即可。