web学习笔记14-移动端页面上拉无限加载
已经有好久没有更新文章了，最近做的东西也不算多，只是没有时间更新文章，今天继续弄个给小白看的文章，一般的移动端搜索结果页或者那种分页加载的页面需要用的，上拉无限加载数据，不知道这个题目对不对，大家看了就知道是不是自己需要的东西了。
下面直接说完成过程吧，这个可以说是非常简单的一个小功能了，对于小白来说也能一眼就能看明白的，当然，要是有更好的方法，希望大家也跟我说下。
第一步：构建页面框架
这一步很简单，一般自己的项目都会有自己的设计，我就直接写一个简单粗糙的列表页。html部分是：
1
2
3
4
5
6
7
8
9
10
11
12
13
加载中。。。
- 数据已经加载到底 -
css部分是这样的：
写完显示出来的样子是下图：
第二步：编写逻辑部分
我这边引入了jquery，大家用js写的话，部分地方有点差异，不过都没啥区别。大家注意下，这块我用的ajax请求的url是公司的，所以就拿掉了，大家替换上各自项目的url和请求数据就行。
//声明部分变量
var pageNum = 1;//页码
var pageSize = 10;//每页多少条数据
var infinite = true;//防止不停调接口加载新数据,false的时候就不能请求接口
var count = 0;//总数,判断是否已经加载到底了
var dataCache = [];//数据缓存，根据接口不同情况，可以考虑不用这个。
//请求方法
function sendRequest(num){
var sendData = {
//其它请求参数
pageNum:num,
pageSize:pageSize
};
if(infinite == true){
//只有infinite是true的时候才可以请求接口
infinite = false;
$.ajax({
type: "POST",
url: url,
data:sendData,
dataType: 'json',
success: function (data) {
console.log(data);
if(data.code == 200 && data.data){
count = data.data.count ? data.data.count:0;
if(data.data.products && data.data.products.length != 0){
setPage(data.data.products);//单独的拼接html,渲染页面的方法。
}else{
//这边处理当数据为空的时候,并且页数为第一页的时候,页面应该有相应的显示
// 比如暂无数据列表之类的文案,背景之类的。
//并且会有种可能就是在加载到部分页数之后,请求回来的数据为空,页面显示也是有相应的变化
if(pageNum == 1){
}else{
}
}
//在页面渲染之后,此时的数字加1,为了下一次的加载
pageNum = data.data.pageNum + 1;
}else{
//接口返回部分code不正确的时候,页面应有相应的显示
console.log(data.content);
}
//设置可以继续请求接口。
infinite = true;
},
error: function (err) {
infinite = true;
console.log('系统异常');
}
});
}else{
infinite = true;
}
}
sendRequest(pageNum);
//渲染页面方法
function setPage(data){
console.log(data);
$(".spinner").remove();//移除加载条
for(var i = 0;i < data.length;i++){
/*这边也可以做一些缓存数据的操作,记住一些数据,然后进行一些别的操作,比如说切换tab的时候,不刷新页面渲染页面
也可以根据不同接口返回的数据来做判断是否数据加载到底。我用的接口不支持返回数量,所以就用这种方式来判断*/
dataCache.push(data[i]);//将数据添加缓存数组中,适合数据量少的时候,不过数据量大的时候也可以用
//拼接html,渲染页面
var html = setHtmlModel(data[i]);
$(".container").append(html);//添加html
}
//判断是否加载到底,如果还有数据的话,就直接显示加载中,如果没有数据的话,就直接显示加载到底
//这部分的样式需要各自项目自己定义,我这边就只做粗糙的显示
var loadHtml = '';
if(count > dataCache.length){
loadHtml = '加载中。。。';
}else{
loadHtml = '- 数据已经加载到底 -';
}
$(".container").append(loadHtml);
}
//拼接html方法,这边的html因为太简单,所以这块看起来有点多余,在部分拼接html复杂的情况下,这样写可以看着好看点,修改添加的时候也方便点
function setHtmlModel(data){
var html = '';
html += ''+data.name+'';
return html;
}
这部分的东西基本上就是请求数据，渲染页面，添加加载框或者加载到底的显示，不过最重要的部分无限加载这块还没有添加上去，所以此时你翻来覆去只能请求一次。
第三步：添加自动加载的方法
//自动加载新数据,当滚轮滚到离页面下面一段距离的时候,就自动更新数据,请求接口
$(function(){
$(window).scroll(function () {
//下面三个参数很重要,大家可以自行百度下具体的解释,一般简单的无限滚动加载都会用到这个
var scrollTop = $(this).scrollTop();//匹配元素的滚动条的垂直位置
var scrollHeight = $(document).height();//匹配元素document的高度
var windowHeight = $(this).height();//匹配元素的高度
if(scrollHeight - scrollTop - windowHeight < 200 ){
//这边多做一个判断,如果还有剩下没有加载的数据就进行加载,如果没有,就不做请求
if(count > dataCache.length){
sendRequest(0,0,pageNum);
infinite = false;
}
}
});
});
走完这三步就完成了一个简单的自动加载的列表页了。
说实话，写前端也有段时间了，按道理来说应该写一点复杂点的东西，像这样简单的东西随随便便都能找到，可能也是我学艺不精，还在慢慢学习中，希望以后能给大家带来更好的文章。有什么问题大家也可以跟我一起交流交流。