artTemplate JS模板引擎使用(移动端上拉加载)

最新推荐文章于 2023-03-23 19:58:56 发布

HeartAndThink

最新推荐文章于 2023-03-23 19:58:56 发布

阅读量2.7k

点赞数

文章标签：移动

本文链接：https://blog.csdn.net/heartAndthink/article/details/67636396

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>红包</title>
<link rel="stylesheet" href="../css/business/base.css" />
<link rel="stylesheet" href="../css/business/myhb.css?20170317" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="msapplication-tap-highlight" content="no">
<script type="text/javascript" src="../js/bes/flexable.js" ></script>
<script type="text/javascript" src="../js/bes/zepto.min.js"></script>
</head>
<body>
<div class="main" id='main'>
<div class="titel">
<div class="icon"></div>
<div class="info">使用规则</div>
</div>
<section id="hbcontent"></section>
</div>
<script id="content" type="text/html">
{{if pages.allnum == 0}}
<div class="shownull">
<i></i>
<em>暂无数据</em>
</div>
{{else}}
{{each dlist as value index}}
<div class="view {{if value.hbtype == 1 }} canuse{{else if value.hbtype == 2}} nouse{{else}} haveuse{{/if}}">
<div class="top">
<div class="title2">
{{if value.hbtype == 1}}
<div class="info2">可使用的券</div>
{{else if value.hbtype == 2}}
<div class="info2">已过期的券</div>
{{else}}
<div class="info2">已使用的券</div>
{{/if}}
</div>
</div>
<div class="mid">
<div class="kfhb">{{value.typename}}</div>
<div class="money">
<em>￥</em>{{value.avalue}}
</div>
</div>

<div class="bot">
<div class="left">
{{if value.gytype == 1}}
<span class="rules">使用规则：雇佣周期满{{value.month}}个月可使用</span>
{{else}}
<span class="rules">使用规则：雇佣金额满{{value.lastprice}}元可使用</span>
{{/if}}
<span class="date">使用期限：{{value.time}}</span>
</div>
{{if value.hbtype == 1}}
<div class="right">
<a class="ues_now">立即使用</a>
</div>
{{/if}}
</div>
</div>
{{/each}}
{{/if}}
</script>
<script type="text/jscript" src="../js/bes/app-bes.js"></script>
<script type="text/javascript" src="../js/bes/artTemplate.js"></script>
<script>
var links="http://"+window.location.host+"/b/finance/discount";
var page = 1; //当前页
var pages =''; //总页数
var cando=true;//是否能请求
var query ='page='+page;
YJAPP.ajaxPost(links,query,function(data){

if(data.status){
page =data.pages.curnum; // 当前页
pages = data.pages.allnum; //总页数
var html = template(
'content',data
);
document.getElementById("hbcontent").innerHTML = html;
}else{
YJAPP.alert(data.info);
}
});

$('body').scroll(function(){
var allHeight = $('.main').height();
var screenHeignt = $('body').height();
var contentOffset = Math.abs($('.main').offset().top);
if(allHeight-screenHeignt-contentOffset <30 && cando && pages > page){
cando = false;
page++;
var query2='page='+page;
YJAPP.ajaxPost(links,query2,function(data){
if(data.status){
var html = template('content',data);
$('#hbcontent').append(html);
cando = true;
}else{
YJAPP.alert(data.info);
}
});
}
});
/*点击规则*/
$('.titel').on('click',function(){
window.location.href="http://"+window.location.host+'/html/my/hbrule.html?token='+getUrlParam('token');

});
</script>

</body>
</html>

HeartAndThink

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
artTemplate JS模板引擎使用(移动端上拉加载)

红包使用规则{{if pages.allnum == 0}}暂无数据{{else}}{{each dlist as value index}}{{if value.hbtype == 1}}可使用的券{{else
复制链接

扫一扫