前端下拉加载数据处理---移动端分页

2020-08-08  本文已影响0人  在下高姓
1.请求后端数据并处理
 dataAll(e,f){//1.后端需要的数据类型2.页码
                let that=this;
                let data={
                    uid:localStorage.getItem('uid'),
                    type:e,
                    pages:f
                };
                GR2('get','http://xxxxxxxxxxxxxx',data,function (res) {
                    if(res.code==1){
                       if(res.data.list!=''){//判断数据是否为空
                            for (let i=0;i<res.data.list.length;i++){
                                if(f!=1){//页码如果为1不push数据避免数据重复
                                    that.dataAll.push(res.data.list[i]);
                                }else {
                                    that.dataAll= res.data.list
                                }
                            }
                        }else {
                             if(f==1){
                                that.dataAll= res.data.list
                            }
                            that.page--;//避免无线跳页
                            if(that.page<1){
                                that.page=1
                            }
                           
                        }
                    }else {
                        alert(res.msg)
                    }

                })
            }
2.下拉底部判断
 mounted:function () {//vue生命周期
            let that=this;
            window.onscroll = function(){
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动条在Y轴上的滚动距离。
                let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;//内容可视区域的高度
                let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;//内容可视区域的高度加上溢出(滚动)的距离。

                if(scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {
                    that.page++;//下拉页码+
                    that.walleS(that.type,that.page);//请求数据
                    console.log('下拉底部')
                }

            };

        }
上一篇 下一篇

猜你喜欢

热点阅读