移动端无限加载教程
Posted lizhiweii
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端无限加载教程相关的知识，希望对你有一定的参考价值。
-------页面滚动到底部 查询数据 无限加载 没有底部显示 没有更多--------
原理：1、输入url进入页面 2、一进页面就ajax--控制器---查询数据库---控制器得到数据 进行html标签拼接 ajax返回给html
3、ajax得到拼接串 添加到指定位置 显示 4、js获取窗口大小 当滚动到底部 再次ajax---控制器---数据库---控制器---html
5、ajax得到拼接串 添加到指定位置 显示 如果ajax返回空 在底部div显示没有更多数据
以下是实例1：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>{:C(‘WEB_SITE_TITLE‘)}</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="__CSS__/dcrh-mobile.css" />
<link rel="stylesheet" type="text/css" href="__USER__/weui.css"/>
<script type="text/javascript" src="__STATIC__/jquery.js"></script>
<style>
body{font-size:14px;font-family:Helvetica;}
.border-top{border-top:1px solid #d9d9d9;}
.margin-top{margin-top:10px;}
.huise{color:#888;}
/* 积分记录 */
.integral-div{padding:5px 15px;background-color:#fff;}
.integral-text{color:#888;margin-left:20px;}
.left{float:left; width:50%;}
.right{float:right; width:50%;}
/* 第二行 */
.two-div{background-color:#fff;margin-top:10px;font-size:12px;}
.two-1{padding:10px 0;margin:0 10px;font-size:14px;border-bottom:1px solid #eeeeee;}
.two-2{margin:0 10px;padding:5px 0;border-bottom:1px solid #eeeeee;}
.two-right{float:right;}
.two-right-num{position:relative;right:0;top:-16px;font-size:22px;color:#12c32f;}
.lvse{color:#12c32f;}
/* 暂无更多 */
.nogengduo-js{padding:15px 15px; text-align:center;}
</style>
</head>
<body>
<!-- 最顶部 -->
<div style="height:40px;"></div>
<div class="top">
<a href=‘javascript:history.go(-1)‘ class="back"style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><img src="__IMG__/left-jiantou.png"/> 返回</a>
<span style="display:inline-block;">积分记录</span>
</div>
<!-- 积分记录 -->
<div class="data"></div>
<!-- 暂无更多 -->
<div class="integral-div nogengduo-js" style="display:none;">
<span class="huise">没有更多记录！</span>
</div>
<!-- 隐藏域 -->
<input type="hidden" value="0" id="kaishi">
<input type="hidden" value="20" id="xianshi">
</body>
<script type="text/javascript">
//获取滚动条当前的位置
function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
}
else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
//获取当前可是范围的高度
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
}
else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}
//获取文档完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
</script>
<script>
$(function(){
var start = Number($("#kaishi").val());
var num = $("#xianshi").val();
//alert(start);
$.ajax({
url: "__MODULE__/Fans/jiazaijifen_jilu",
type: "post",
data:{"start":start,"num":num},
async:true,
success: function(res){
if(res == null){
$(".nogengduo-js").css("display","block");
}
$("#kaishi").val(start);
$(‘.data‘).append(res);
}
});
});
window.onscroll = function(){
if(getScrollTop() + getClientHeight() == getScrollHeight()){
var start = Number($("#kaishi").val())+20;
var num = $("#xianshi").val();
//alert(start);
$.ajax({
url: "__MODULE__/Fans/jiazaijifen_jilu",
type: "post",
data:{"start":start,"num":num},
async:true,
success: function(res){
if(res == null){
$(".nogengduo-js").css("display","block");
}
$("#kaishi").val(start);
$(‘.data‘).append(res);
}
});
}
}
</script>
</html>
以上是关于移动端无限加载教程的主要内容，如果未能解决你的问题，请参考以下文章
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多