移动端页面下拉加载分页数据

1: javascript写法:

//请求阅读记录数据
var page = 0;
//第一页的数据。页面刚进来就请求这个方法
function getTingHistory(date) {
    $.ajax({
        url: '/studyplan/GetListen?userid=' + curUserId+'&time=' + date + '&page=0' + "&timezone=" + timezone,
        type: 'get',
        success: function (msg)
        {
                $("#read_history").html(msg);//msg里面是ul列表数据，直接塞到div里面显示
                is_extending = true;
        },
        error: function (msg) {
            console.log("请求错误");
            is_extending = false;
        }
    })
}
//后面几页的数据
function extendgetTingHistory(date, page) {
    $.ajax({
        url: '/studyplan/GetListen?userid=' + curUserId+'&time=' + date + '&page=' + page + "&timezone=" + timezone,
        type: 'get',
        success: function (msg) {
            if (msg.length>0) {
                $("#read_history").append(msg);//将后几页的数据加上
                is_extending = true;
            } 
        },
        error: function (msg) {
            console.log("请求错误");
            is_extending = false;
        }
    })
}

var is_extending = false;
//下拉加载更多
$(window).scroll(function () {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop + window.innerHeight + 20 >= document.documentElement.offsetHeight) {
        if (is_extending) {
            is_extending = false;
            page++;
            extendgetTingHistory(selectDay,page);
        }
    }
});

2: vue.js写法:

//html部分：
        <ul class="member_ul">
            <li class="member_li" v-for="(item,index) in studentList">
                <div class="avatar"><img :src="item.avatar" alt="Alternate Text"></div>
                <div class="member_right">
                    <div class="mem_name">{{item.name}}</div>
                </div>
            </li>
        </ul>

//js部分：
 export default {
        data: function () {
            return {
                studentList: [],
                myinfo: '',
                pageNum: 0,
               // 设置一个开关来避免重负请求数据
                is_extending: true,
            };
        },
        created() {
            var _self = this;
            this.GetStudentsList();
        },
        mounted() {
            //滚动监听事件
            window.addEventListener('scroll', this.menu);
        },
        methods: {
        //页面刚进来就请求这个方法
            GetStudentsList() {
                var _self = this;
                this.$http.get('/StudyPlan/GetStudents?classId=' + classid + "&page=0&size=30", {
                })
                    .then(function (response) {
                        _self.pageNum = 0;
                        _self.studentList = response.data.students;
                    })
                    .catch(function (error) {
                        _self.is_extending = false;
                    });
            },
            //请第二页以后的数据
            extendGetStudentsList() {
                var _self = this;
                _self.pageNum++;
                this.$http.get('/StudyPlan/GetStudents?classId=' + classid + "&page=" + _self.pageNum + "&size=30", {
                })
                    .then(function (response) {
                        _self.studentList = _self.studentList.concat(response.data.students);
                        _self.is_extending = true;
                    })
                    .catch(function (error) {
                        _self.is_extending = false;
                    });
            },
            menu() {
                var _self = this;
                _self.scroll = document.documentElement.scrollTop || document.body.scrollTop;
                if (_self.scroll + window.innerHeight+20>= document.documentElement.offsetHeight) {
                    if (_self.is_extending) {
                        _self.is_extending = false;
                        _self.extendGetStudentsList();
                    }

                }
            },
        },
    }