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

实现上拉加载

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])

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值