Vue.js 开发实践:实现精巧的无限加载与分页功能

let doc=this.$refs.recScroll.querySelector("#scrollContent");
let docWrap=this.$refs.recScroll.querySelector("#scrollWrap");
let _this=this
let index=0;
let id=window.location.hash.substring(window.location.hash.indexOf("=")+1);
this.ajaxData(id,0)
        docWrap.addEventListener("scroll", function(){
            if( docWrap.scrollTop+docWrap.offsetHeight>=doc.scrollHeight){

                index+=10
                _this.ajaxData(id,index)
            }
        })
ajaxData(id, index) {
            if(this.detailDatasEnd) return;
            this.$http.get('/ajax/detail?id='+id+'&start='+index+'&count=10').then((res) => {
                this.detailDatas=this.detailDatas.concat(res.body.items)
                this.detailDatasIndex+=res.body.count;
                if(res.body.count<10){
                    //console.log(res.body.count)
                    this.detailDatasEnd=true;
                }
            }, (res) => {})
        }

你可能感兴趣的:(Vue.js 开发实践:实现精巧的无限加载与分页功能)