<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<script type="text/javascript" src="./laytpl/laytpl.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<script id="demo" type="text/html">
{{# for (var i=0,len=d.list.length;i<len;i++){ }}
<h1>{{ d.list[i].name }}</h1>
{{# } }}
</script>
<div id="view">
正在加载中...
</div>
<script type="text/javascript">
//滚动后加载
var data = {
list: [{name: '2'}, {name: '2'},{name: '2'},{name: '2'},{name: '2'},{name: '2'},{name: '2'},{name: '2'}, {name: '2'},{name: '2'},{name: '2'},{name: '2'},{name: '2'},{name: '2'},{name: '2'}, {name: '2'},{name: '2'},{name: '2'},{name: '2'},{name: '2'},{name: '2'}]
};
//page 1
var data1 = {
list: [{name: '1'}, {name: 'b'},{name: 'c'},{name: 'd'},{name: 'a'}, {name: 'b'},{name: 'c'},{name: 'd'},{name: 'a'}, {name: 'b'},{name: 'c'},{name: 'd'},{name: 'b'},{name: 'c'},{name: 'd'},{name: 'b'},{name: 'c'},{name: 'd'},{name: 'b'},{name: 'c'},{name: 'd'},{name: 'b'},{name: 'c'},{name: 'd'},{name: 'b'},{name: 'c'},{name: 'd'}]
};
</script>
<script type="text/javascript">
function getScrollHeight() {
var scrollHeight = 0;
var bodyScrollHeight = 0;
var documentScrollHeight = 0;
if (window.document.body) {
bodyScrollHeight = document.body.scrollHeight;
}
if (document.documentElement) {
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}
function getWindowHeight() {
var windowHeight = 0;
if (document.compatMode == "CSS1Compat") {
windowHeight = document.documentElement.clientHeight;
} else {
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
function getScrollTop() {
var scrollTop = 0,
bodyScrollTop = 0,
documentScrollTop = 0;
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}
document.addEventListener('scroll', function() {
//判段是否到达底部
if (getScrollTop() + getWindowHeight() == getScrollHeight()) {
// var newpage = parseInt(page.value) + 1;
var gettpl = document.getElementById('demo').innerHTML;
laytpl(gettpl).render(data, function(html){
// 追加数据
$('#view').append(html);
console.log('我被加载了');
});
}
});
//第一次加载数据
var gettpl = document.getElementById('demo').innerHTML;
laytpl(gettpl).render(data1, function(html){
document.getElementById('view').innerHTML = html;
});
</script>
</body>
</html> 附件 demo.zip ( 4.36 KB 下载:173 次 )
ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。