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部分：
文章图片
{{item.name}}
//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();
}}
},
},
}
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端开发|Vue2.x API 学习