mescroll-react

开始

可直接复制到代码中修改使用

运行该页面,试试下拉刷新和上滑加载吧！

.wrap {
  // 一定要给一个固定高度哦
  position: fixed;
  width: 100%;
  height: 100%;
  .each {
    margin: 10vw;
    font-size: 10vw;
  }
}

import React, { useRef, useState } from 'react'
import MescrollReact, { refType } from 'mescroll-react'

const mockData = (length: number) => Array.from({ length }, (_v, i) => `item${i + 1}`)
const pageSize = 10

function Demo() {
  const ref = useRef<refType | null>(null)
  const [page, setPage] = useState(1)
  const [list, setList] = useState(mockData(page * pageSize))

  const dropDownCb = () => {
    setPage(() => {
      setList(mockData(1 * pageSize))
      ref.current?.endDropDown()
      return 1
    })
  }
  const upGlideCb = () => {
    setPage(v => {
      const nextPgae = v + 1
      setList(mockData(nextPgae * pageSize))
      // mock第五页之后没有数据了
      ref.current?.endUpGlide(nextPgae < 5)
      return nextPgae
    })
  }
  return (
    <>
      <MescrollReact className="wrap" ref={ref} dropDownCb={dropDownCb} upGlideCb={upGlideCb}>
        {list.map(v => (
          <div className="each" key={v}>
            {v}
          </div>
        ))}
      </MescrollReact>
    </>
  )
}

export default Demo

组件透传参数说明

目前暂时开放以下参数，后续会补充

interface PropRule {
  // 下拉刷新回调
  dropDownCb?: () => void
  // 上滑触底回调
  upGlideCb?: () => void
  className?: string
  style?: React.CSSProperties
  children?: React.ReactNode
  // 还剩多少距离(px)触发上滑触底回调
  upGlideOffset?: number
}

ref 参数说明

interface refType = {
  // 结束下拉刷新状态
  endDropDown: () => void
  // 结束上拉加载状态: hasMore是否有更多,传false时上滑触底回调不再触发
  endUpGlide: (hasMore?: boolean) => void
  // 滚动列表到指定位置: yAxis为竖直方向距离  time为毫秒
  scrollTo: (yAxis: number, time: number) => void
}