移动端如何实现上拉加载？下拉刷新？_移动端如何实现下拉刷新

实现上拉加载

1、首先需要下载第三方库antd-mobile

npm install --save antd-mobile

 我们需要使用的是InfiniteScroll 无限滚动、PullToRefresh 下拉刷新

2、我们需要在最外层的盒子上定义ref属性，并且需要调用onScroll事件、最外层盒子样式需要overflow-y:scroll;

<div className='goods' ref={scr} onScroll={handleScroll}></div>

 这里我们需要使用ref获取到页面高度和滚动条高度通过onScroll事件来判断是否触底

//触底
    const scr = useRef()
    const handleScroll = () => {
        const res = scr.current.scrollHeight - scr.current.scrollTop - scr.current.clientHeight
        console.log(res);
        if (res <= 0) {
            console.log('触底啦');
            getGoods()
        } else {
            return
        }
    }

 这里是触底的操作 我们页面到底数据更新是在这里进行重新调用获取数据接口来渲染页面

.goods {
    width: 100vw;
    height: 100vh;
    /* overflow-y: hidden; */
    overflow-y: scroll;
    /* position: relative; */
}

css必须使用overflow-y:scroll;否则无法获取滚动条的事件不能使用

3、 我们需要对后端获取的数据进行截取，让它每次触底加载四条数据

 const getGoods = async () => {
        let { data } = await axios.get('http://localhost:5000/getGoodsList')
        setTimeout(() => {
            let tmp = goods
            tmp.length >= data.data.length ? tmp.push(...data.data.slice(0, 4)) : tmp.push(...data.data)
            if (tmp.length < 31) {
                setGoods([...tmp])
                setFilterGoods([...tmp])
            } else {
                return false
            }
        }, 2000)
    }

4、页面这个时候会出现加载中，但是我们想要限制它在一定的数据限制，让它页面加载完毕显示加载完成。

//下拉加载
    const [hasMore, setHasMore] = useState(true)
    function loadMore() {
        if (goods.length >= 30) {
            setHasMore(false)
        }
    }
 
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />复制到我们页面数据获取的下方

5、我们这里基本的下拉加载已经完成

实现下拉刷新 

我们同样使用到了antd-mobile组件库

实现很简单只需要一步就可以完成

<PullToRefresh onRefresh={async ()=>{await sleep(1000) setIsSort(!isSort)}}></PullToRefresh>
//包裹住我们需要刷新的页面
//onRefresh 触发刷新时的处理函数	也就是我们上拉时触发的事件
//我这里是通过上拉刷新 将我自己定义的排序让它进行反向排序 来实现刷新
//自己也可以根据数据打乱来实现这里我们就不详细说明了

 

简单说下排序

//定义排序函数
    function asc(a, b) {
        return a.price - b.price
    }
    function desc(a, b) {
        return b.price - a.price
    }
 //监听排序
    useEffect(() => {
        if (isSort) {
            const ascData = goods.sort(asc)
            setFilterGoods([...ascData])
        } else {
            const descData = goods.sort(desc)
            setFilterGoods([...descData])
        }
    }, [isSort])

这里我们的上拉加载下拉刷新就实现了(●ˇ∀ˇ●)