vue滚动加载更多

2019-10-11  本文已影响0人  Wo信你个鬼

data中的变量

data(){
    return{
        list:[],
        isBot:true, //到底部
        page:0
    }
}

created生命周期调用方法

created(){
    this.getNewsList();
}

methods中写getNewsList方法

methods:{
    getNewsList(){
    //请求文章数据
    this.$require.get(config.newsList,{
        params:{
            page:this.page
        }
        }).then((res)=>{
            if(res.data.data.rows.length>0){
                this.isBot = true;
                res.data.data.rows.forEach(val=>{
                    console.log("val",val)
                    this.list.push(val)
                })
            }
            console.log("文章数据",res)
        })
     } 
  }

mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。再次调用getNewsList方法

mounted(){
    var winH = window.innerHeight;
    console.log(winH)
        window.addEventListener("scroll",()=>{
            var content = document.querySelector(".content");
            if (content == null) {
                return
            }
            var conPosi = content.getBoundingClientRect();
            console.log("conPosi",conPosi)
            if(winH+10>=conPosi.bottom && this.isBot == true){
                this.isBot = false;
                this.page++;
                this.getNewsList();
                console.log("到底了")
            }
        })
    }
上一篇下一篇

猜你喜欢

热点阅读