page-bottom-more-ns v1.1.2

use page-bottom-more-ns

install

cnpm i page-bottom-more-ns --save

use

import { useRef } from 'react';
import styled from 'styled-components';
import { Button, ErrorBlock, SpinLoading } from 'antd-mobile';
import type { PageBottomMoreNsRefOpts } from 'page-bottom-more-ns';
import PageBottomMoreNs from 'page-bottom-more-ns';

type CurrentItem = defs.Dict;
const Index = () => {
  const pageBottomMoreNsRef = useRef<PageBottomMoreNsRefOpts<CurrentItem>>({});
  const paramsRef = useRef<CurrentItem>();
  return (
    <Container>
      <PageBottomMoreNs<CurrentItem>
        cRef={pageBottomMoreNsRef}
        request={async (params) => {
          const response = await API.dict.findAll.request({
            isChild: true,
            ...paramsRef.current,
            ...params,
          });
          return {
            data: response?.list,
            size: response?.size,
          };
        }}
      >
        {({ list, page, loading }) => (
          <>
            <div className="flex-lc gap20 mb20">
              <div>最新页数：{page}</div>
              <Button
                onClick={() => {
                  paramsRef.current = { isSystem: 1 };
                  pageBottomMoreNsRef.current.call?.();
                }}
              >
                请求系统字典
              </Button>
            </div>
            <div>
              {loading && (
                <div className="flex-cc mt40">
                  <SpinLoading color="primary" />
                </div>
              )}
              {list.map((item) => (
                <div key={item.id} className="ns-item mb20">
                  <div>{item.v}</div>
                </div>
              ))}
              {!list.length && !loading && (
                <ErrorBlock status="empty" title="暂无数据" description="" />
              )}
            </div>
          </>
        )}
      </PageBottomMoreNs>
    </Container>
  );
};

export default Index;

const Container = styled.div`
  min-height: 100%;
  .ns-item {
    height: 200px;
    background: red;
  }
`;

updates

v1.1.2

修复 reload逻辑

v1.1.1

ADD reload

v1.0.2

修改默认分页

v1.0.1

优化导入

v1.0.0

初始化私服