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

文章介绍了如何使用antd-mobile库实现无限滚动的上拉加载和下拉刷新功能。通过设置ref属性、监听onScroll事件判断是否触底,以及截取数据分批加载。同时,文章展示了如何使用PullToRefresh组件进行下拉刷新操作,并通过排序示例解释了刷新机制。
摘要由CSDN通过智能技术生成

实现上拉加载

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
    评论
在Angular2移动实现和下刷新的方式有许多种。下面我将介绍一种常用的实现方法。 1. 首先,我们需要引入一些必要的库和组件。我们可以使用Ionic框架中提供的IonRefresher和InfiniteScroll组件来实现刷新和上的效果。需要确保已经安装了Ionic框架并引入了相关的模块。 2. 在需要实现的页面或组件中,添一个IonRefresher组件,并绑定事件。例如: ```html <ion-content> <ion-refresher (ionRefresh)="doRefresh($event)"> <ion-refresher-content></ion-refresher-content> </ion-refresher> <!--其他内容--> </ion-content> ``` 在组件中,定义一个doRefresh方法来处理刷新的逻辑。例如: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'your-component', templateUrl: 'your-component.html', styleUrls: ['your-component.css'] }) export class YourComponent { doRefresh(event) { // 执行刷新逻辑 // 更新数据 // 结束刷新动作 event.complete(); } } ``` 3. 接下来,我们来实现的效果。在页面或组件中添一个InfiniteScroll组件,并绑定事件。例如: ```html <ion-content (ionInfinite)="loadMore($event)"> <!--其他内容--> <ion-infinite-scroll> <ion-infinite-scroll-content></ion-infinite-scroll-content> </ion-infinite-scroll> </ion-content> ``` 在组件中,定义一个loadMore方法来处理更多的逻辑。例如: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'your-component', templateUrl: 'your-component.html', styleUrls: ['your-component.css'] }) export class YourComponent { loadMore(event) { // 执行更多逻辑 // 更多数据 // 结束更多动作 event.complete(); } } ``` 以上就是使用Ionic框架中的IonRefresher和InfiniteScroll组件来实现Angular2移动和下刷新的步骤。需注意在具体的业务逻辑中,需要结合实际情况进行相应的处理。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值