美文网首页
前端下拉加载数据处理---移动端分页

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

作者: 在下高姓 | 来源:发表于2020-08-08 11:43 被阅读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('下拉底部')
                }

            };

        }

相关文章

网友评论

      本文标题:前端下拉加载数据处理---移动端分页

      本文链接:https://www.haomeiwen.com/subject/wdfsrktx.html