TaroifyReact UI

    PullRefresh 下拉刷新

    介绍

    用于提供下拉刷新的交互操作。

    引入

    import { PullRefresh } from "@taroify/core"

    代码演示

    基础用法

    下拉刷新时会触发 onRefresh 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 loading 设置为 false，表示加载完成。

    function BasicPullRefresh() {
  const [loading, setLoading] = useState(false)
  const [counter, setCounter] = useState(0)
  const [reachTop, setReachTop] = useState(true)

  usePageScroll(({ scrollTop }) => setReachTop(scrollTop === 0))

  return (
    <PullRefresh
      loading={loading}
      reachTop={reachTop}
      onRefresh={() => {
        setLoading(true)
        setTimeout(() => {
          setCounter(counter + 1)
          setLoading(false)
        }, 1000)
      }}
    >
      <View className="pull-text">{counter ? "刷新次数：" + counter : "下拉试试"}</View>
    </PullRefresh>
  )
}

    Tips：在 PullRefresh 组件内部采用 Selector API 获得父滚动元素的 scrollTop 值会带来下拉卡顿的性能问题。因此需要在 PullRefresh 组件外部判断 scrollTop 值，在页面中使用 usePageScroll() 钩子获得 scrollTop 值，在 ScrollView 组件内监听 onScroll 事件获得 scrollTop 值。 固定高度的 List 可以开启 pullRefresh 自动同步滚动位置，具体用法请参考 List 下拉刷新。

    完成提示

    通过 PullRefresh.Completed 可以设置刷新成功后的顶部提示文案。

    function CompletedPullRefresh() {
  const [loading, setLoading] = useState(false)
  const [counter, setCounter] = useState(0)
  const [reachTop, setReachTop] = useState(true)

  usePageScroll(({ scrollTop }) => setReachTop(scrollTop === 0))

  return (
    <PullRefresh
      loading={loading}
      reachTop={reachTop}
      onRefresh={() => {
        setLoading(true)
        setTimeout(() => {
          setLoading(false)
          setCounter(counter + 1)
        }, 1000)
      }}
    >
      <PullRefresh.Completed>刷新成功</PullRefresh.Completed>
      <View className="pull-text">{counter ? "刷新次数：" + counter : "下拉试试"}</View>
    </PullRefresh>
  )
}

    自定义提示

    通过子组件可以自定义下拉刷新过程中的提示内容。

    function CustomPullRefresh() {
  const [loading, setLoading] = useState(false)
  const [counter, setCounter] = useState(0)
  const [reachTop, setReachTop] = useState(true)

  usePageScroll(({ scrollTop }) => setReachTop(scrollTop === 0))

  return (
    <PullRefresh
      loading={loading}
      headHeight={80}
      reachTop={reachTop}
      onRefresh={() => {
        setLoading(true)
        setTimeout(() => {
          setCounter(counter + 1)
          setLoading(false)
        }, 1000)
      }}
    >
      <PullRefresh.Pulling>
        {({ distance = 0 }) => (
          <Image
            className="doge"
            style={{ transform: `scale(${distance / 80})` }}
            src="https://img.yzcdn.cn/vant/doge.png"
          />
        )}
      </PullRefresh.Pulling>
      <PullRefresh.Loosing>
        <Image className="doge" src="https://img.yzcdn.cn/vant/doge.png" />
      </PullRefresh.Loosing>
      <PullRefresh.Loading>
        <Image className="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />
      </PullRefresh.Loading>
      <View className="pull-text">{counter ? "刷新次数：" + counter : "下拉试试"}</View>
    </PullRefresh>
  )
}
    .doge {
  width: 140px * 2;
  height: 72px * 2;
  margin-top: 8px * 2;
  border-radius: 4px * 2;
}

    搭配 ScrollView

    可搭配 ScrollView 组件

    function BasicPullRefresh() {
  const [loading, setLoading] = useState(false)
  const [counter, setCounter] = useState(0)
  const [reachTop, setReachTop] = useState(true)

  usePageScroll(({ scrollTop }) => setReachTop(scrollTop === 0))

  return (
    <ScrollView scrollY>
      <PullRefresh
        loading={loading}
        reachTop={reachTop}
        onRefresh={() => {
          setLoading(true)
          setTimeout(() => {
            setCounter(counter + 1)
            setLoading(false)
          }, 1000)
        }}
      >
        <View className="pull-text">{counter ? "刷新次数：" + counter : "下拉试试"}</View>
      </PullRefresh>
    </ScrollView>
  )
}

    API

    Props

    参数说明类型默认值
    loading是否处于加载中状态boolean-
    duration动画时长number | string300
    headHeight顶部内容高度number | string50
    reachTop是否处于顶部下拉booleantrue
    pullDistance触发下拉刷新的距离number | string与 headHeight 一致
    disabled是否禁用下拉刷新booleanfalse

    Events

    事件名说明回调参数
    onRefresh下拉刷新时触发-

    主题定制

    样式变量

    组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

    名称默认值描述
    --pull-refresh-head-height50px * $hd-
    --pull-refresh-head-line-heightvar(--pull-refresh-head-height)-
    --pull-refresh-head-font-sizevar(--font-size-md)-
    --pull-refresh-head-colorvar(--gray-6)-
    --pull-refresh-loading-icon-size16px * $hd-
    --pull-refresh-loading-icon-widthvar(--pull-refresh-loading-icon-size)-
    --pull-refresh-loading-icon-heightvar(--pull-refresh-loading-icon-size)-