美文网首页
vue滚动加载更多

vue滚动加载更多

作者: Wo信你个鬼 | 来源:发表于2019-10-11 11:12 被阅读0次

    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("到底了")
                }
            })
        }
    

    相关文章

      网友评论

          本文标题:vue滚动加载更多

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