uniapp上拉加载的避坑指南

╰半夏微凉° 2022-12-30 01:24 255阅读 0赞

# uniapp上拉加载 #

> uniapp的上拉加载和下拉刷新一样都有两个方法, 一个是整体的上拉(生命周期函数onReachBottom), 一个是局部的上拉(基于scrpll-view组件);

## 一.整个页面的上拉(onReachBottom) ##

**注意: 使用scroll-view导致页面级没有滚动，则触底事件不会被触发**

onReachBottom() { 
        //当数组里的数据大于等于total的时候,说明数据已经加载完了
        if (this.dataList.length >= this.total) { 
            setTimeout(() => { 
                this.status = 'noMore'
            }, 1000)
        } else { 
            //每次上拉加载的数据比上一次多十个
            this.current++
            this.status = 'loading'
            let that = this
            setTimeout(() => { 
                that.getData()
            }, 1000)
    
        }
    },
    methods:{ 
    	getData(){ 
            let data={ 
                current: this.current,
                size: this.size
            }
            uni.request({ 
                url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
                data:data,
                header: { 
                    'custom-header': 'hello' //自定义请求头信息
                },
                success: (res) => { 
                    if (res.success) { 
                        //下拉刷新的时候将数组置空
                        if (this.pull) { 
                            this.dataList = []
                        }
                        this.total = res.total
                        for (let i = 0; i < res.rows.length; i++) { 
                            this.dataList.push(res.rows[i])
                        }
    
                    }
                    this.pull = false
                    this.status = 'noMore'
                }
            });
            
        }
    }

## 二.局部上拉(@scrolltolower) ##

> 整体上拉onReachBottom和局部上拉@scrolltolower里的代码提现一样

### 上拉触发不了的原因:(参考不能触发下拉加载) ###

1.  scroll-view组件是局部的滚动, 如果只滚动整个页面, scroll不滚动到底, 就不会触发局部的上拉
2.  scroll-view组件里的数据太少, 不能进行滚动.
3.  没有给scroll固定高
4.  没有用view将scroll包裹住
5.  使用了overflow:hidden
6.  没有设置scroll-y