需要启个服务
需引入jquery.js和template.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="format-detection" content="telephone=no">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<title>js-template-数据测试应用</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/template.js"></script>
<style>
.container{ 100%; height: 1500px; background-color: #56aae5; }
.tit{ font-size: 30px; color: #fff;}
</style>
</head>
<body >
<section class="container">
<h1 class="tit">此处占位：向下滑动~渲染结构内容</h1>
</section>
<div id="load-html">
<ul id="list">
</ul>
</div>
<div class="getMore" id="getMore" data-html="───────我是有底线的───────" >───────我是有底线的───────</div>
<!--模版结构-->
<script type="text/html" id="t_list">
{{if list.length==0}}
<li></li>
{{else}}
{{each list as v i}}
<li>
<div class="item">
<div class="tp">
<a href="javascript:;">
<img class="lazy" src="{{v.img}}" alt="" title="">
</a>
<i data-id="" class="ico icoLove js-love" ></i>
{{if v.tag==0}}
<span class="lab"></span>
{{else if v.tag==1}}
<span class="lab labTj"></span>
{{else if v.tag==2}}
<span class="lab labNew"></span>
{{/if}}
</div>
<div class="txt">
<p class="tiName">
<a href="javascript:;">{{v.title}}</a>
</p>
<div class="bot">
{{if v.state==0}}
<div class="money fl">
<em class="num">{{v.cost}}</em>学习币
</div>
{{else}}
<div class="money moneyNo fl">
<em class="num">{{v.cost}}</em>学习币
</div>
{{/if}}
<div class="handle fr">
<a href="javascript:;">
{{if v.state==0}}
<i class="ico icoBuy"></i>
<span class="ti00">购买</span>
{{else}}
<i class="ico icoPlay"></i>
<span class="ti00">播放</span>
{{/if}}
</a>
</div>
</div>
</div>
</div>
</li>
{{/each}}
{{/if}}
</script>
<!--滑动渲染加载数据：-->
<script>
//json字符串处理
function parseData(d) {
return typeof(d) == 'string' ? JSON.parse(d) : d;
}
//定义方法
let page = 1,
isEnd = false;
$(window).scroll(function () {
let $bd = $("#list"),
$getMore = $("#getMore"),
html = "",
scrTop = $(document).scrollTop(),
nowHig = ($(document).height() - $(window).height());
if ( scrTop >= nowHig ) {
$.ajax({
type : "get",
url : "json/test.json",
data : {'page':page},
dataType: "json",
beforeSend(){
if (isEnd) {
return false;
}
},
success(data){
var d = parseData(data);
console.log(d);
if(d.status==1){
//生成数据
var allList = d.allList,
newList = [];
console.log(allList)
for(var k in allList){
var value = allList[k];
newList[k] = value.map(function (v) {
return v;
});
console.log(newList[k]);
}
//判断页码:
let {totalPage: totalPage, page: currentPage} = d;
page++;
$getMore.show();
if (currentPage == totalPage) {
isEnd = true;
$getMore.show().html($getMore.data('html'));
}
}
//渲染结构
html = template("t_list",newList);
$bd.append(html);
},
complete(){
console.log(isEnd); //true
}
})
}
});
</script>
</body>
</html>
json数据格式
{
"allList":{
"list":[
{
"id":"01",
"img":"imgs/1.jpg",
"title":"我是标题01",
"cost":1100,
"tag":0,
"state":0
},
{
"id":"02",
"img":"imgs/2.jpg",
"title":"我是标题02",
"cost":1200,
"tag":1,
"state":1
},
{
"id":"03",
"img":"imgs/3.jpg",
"title":"我是标题03",
"cost":1300,
"tag":1,
"state":1
},
{
"id":"04",
"img":"imgs/4.jpg",
"title":"我是标题04",
"cost":1400,
"tag":2,
"state":1
},
{
"id":"05",
"img":"imgs/5.jpg",
"title":"我是标题05",
"cost":1500,
"tag":1,
"state":0
},
{
"id":"06",
"img":"imgs/6.jpg",
"title":"我是标题06",
"cost":1600,
"tag":0,
"state":1
},
{
"id":"07",
"img":"imgs/7.jpg",
"title":"我是标题07",
"cost":1700,
"tag":0,
"state":0
},
{
"id":"08",
"img":"imgs/8.jpg",
"title":"我是标题08",
"cost":1800,
"tag":0,
"state":1
},
{
"id":"09",
"img":"imgs/9.jpg",
"title":"我是标题09",
"cost":1900,
"tag":0,
"state":0
}
]
},
"status":1,
"page":1,
"totalPage":1
}