跳到主要内容

useManualPullDownRefresh

警告

区分官方的usePullDownRefresh, 官方为监听下拉刷新, 而本 hook 则为手动控制界面展示下拉刷新

手动下拉刷新

何时使用​

当需要手动设置下拉刷新状态时

API​

const [start, stop] = useManualPullDownRefresh();

参数说明​

无

返回值说明​

参数类型说明
start(duration?: number) => Promise<General.CallbackResult>开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致(若设置duration, 则会在设置时间结束后自动停止下拉刷新)
stop() => Promise<General.CallbackResult>停止当前页面下拉刷新

代码演示​

layout/useManualPullDownRefresh/index
import React from 'react';
import { useManualPullDownRefresh, useBackground } from 'taro-hooks';
import Mock from 'mockjs';
import DemoContent from '@src/components/DemoContent';
import { Button } from '@taroify/core';

export default () => {
  const [start, stop] = useManualPullDownRefresh();
  useBackground({ textStyle: 'dark', backgroundColor: Mock.Random.color() });

  return (
    <DemoContent>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => start()}
        shape="square"
      >
        开始下拉刷新
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={stop}
        shape="square"
      >
        结束下拉刷新
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => start(2000)}
        shape="square"
      >
        开始下拉刷新2S后停止
      </Button>
    </DemoContent>
  );
};

Hook 支持度​

微信小程序H5ReactNative
✔️✔️✔️(无动画效果)