docs(pagination): add usePagination demos

Author: innocces

packages/app/src/pages/useRequest/index.tsx

@@ -88,6 +88,11 @@ const list: IListItem[] = [
     note: '通过设置 requstMethod, 可以使用自己的请求库。',
     route: 'axios',
   },
+  {
+    title: '普通分页',
+    note: '普通的分页场景，我们会自动管理 current 和 pageSize。',
+    route: 'pagination',
+  },
 ];
 
 export default () => {

packages/app/src/pages/useRequest/pagination/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'useRequest 普通分页',
+};

packages/app/src/pages/useRequest/pagination/index.tsx

@@ -0,0 +1,78 @@
+/**
+ * desc: 普通的分页场景，我们会自动管理 `current` 和 `pageSize`。
+ */
+import React from 'react';
+import { useRequest } from 'taro-hooks';
+import Mock from 'mockjs';
+
+import { View } from '@tarojs/components';
+import { AtList, AtListItem, AtPagination } from 'taro-ui';
+import DocPage from '@components/DocPage';
+
+interface UserListItem {
+  id: string;
+  name: string;
+  gender: 'male' | 'female';
+  email: string;
+  disabled: boolean;
+}
+
+const userList = (current: number, pageSize: number) =>
+  Mock.mock({
+    total: 55,
+    [`list|${pageSize}`]: [
+      {
+        id: '@guid()',
+        name: '@cname()',
+        'gender|1': ['male', 'female'],
+        email: '@email()',
+        disabled: false,
+      },
+    ],
+  });
+
+async function getUserList(params: {
+  current: number;
+  pageSize: number;
+  gender?: string;
+}): Promise<{ total: number; list: UserListItem[] }> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(userList(params.current, params.pageSize));
+    }, 1000);
+  });
+}
+
+const ReadyRequest = () => {
+  const { data, loading, pagination } = useRequest(
+    ({ current, pageSize }: { current: number; pageSize: number }) =>
+      getUserList({ current, pageSize }),
+    {
+      paginated: true,
+    },
+  );
+  console.log(pagination);
+  return (
+    <DocPage title="useRequest 普通分页" panelTitle="普通分页">
+      {loading ? (
+        <View>loading...</View>
+      ) : (
+        <AtList>
+          {data?.list?.map(({ email, name }: UserListItem) => (
+            <AtListItem title={name} note={email} key={name} />
+          ))}
+        </AtList>
+      )}
+
+      <AtPagination
+        customStyle={{ marginTop: '10px' }}
+        {...pagination}
+        onPageChange={(type: string, current: number) =>
+          pagination.onChange(current, 10)
+        }
+      />
+    </DocPage>
+  );
+};
+
+export default ReadyRequest;

packages/hooks/src/useRequest/index.md

@@ -238,6 +238,10 @@ const {...} = useRequest<R>(
 - 会额外返回 `pagination` 字段，包含所有分页信息，及操作分页的函数。
 - `refreshDeps` 变化，会重置 `current` 到第一页，并重新发起请求，一般你可以把 pagination 依赖的条件放这里。
 
+下面示例使用`AtPagination`(即`Taro ui`)的分页器。属性同`antd`的`pagination`.
+
+<code src="@pages/useRequest/pagination"></code>
+
 #### API
 
 ```javascript