开始
可直接复制到代码中修改使用
运行该页面,试试下拉刷新和上滑加载吧！
.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
}