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) => {})
        }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容