微擎框架下拉分页（使用js模板引擎）

Posted 2020-09-30 一个永

1.需要分页的页面，引入一下文件

<script language="javascript" src="\addons\{$_GPC[‘m‘]}\template\mobile\js/require.js"></script><!--分页相关-->
<script language="javascript" src="\addons\{$_GPC[‘m‘]}\template\mobile\js/config.js"></script><!--分页相关-->
<style type="text/css">
.credit_list {height:40px; width:94%; background:#fff; padding:10px 3%;margin-top:5px;}
.credit_list .info {height:40px; width:70%; float:left; font-size:16px; color:#666; line-height:20px; text-align:left;}
.credit_list .info span {font-size:14px; color:#999;}
.credit_list .num {height:40px; border-left:1px solid #eaeaea; width:20%;line-height:40px; float:right; text-align:right; font-size:16px; color:#666;}
.credit_list .num span {font-size:14px; color:#999;}
.credit_tab {height:30px; margin:5px; border:1px solid #ff6801; border-radius:5px; overflow:hidden;font-size:13px;background:#fff;padding-right: -2px;}
.credit_nav {height:30px; width:50%; background:#fff; color:#666; text-align:center; line-height:30px; float:left;}
.credit_navon {color:#fff; background:#ff6801;}
.credit_no {height:100px; width:100%; margin:50px 0px 60px; color:#ccc; font-size:12px; text-align:center;}
#credit_loading { padding:10px;color:#666;text-align: center;}
</style>

====================================

 发起请求

<script language="javascript">

require([‘core‘,‘tpl‘],function(core,tpl){//分页相关请求
core.init({
siteUrl: "{$_W[‘siteroot‘]}",
baseUrl: "{$_SERVER[‘REQUEST_URI‘]}"
});

})
</script>

========================================

循环，注意最外面div的id

<div class="weui-form-preview" id="container">
<script id=‘tpl_log‘ type=‘text/html‘>
<%each list as log v%>

<div class="weui-form-preview__hd">
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">预约活动</label>
<em class="weui-form-preview__value"><%log.yybt%></em>
</div>
</div>
<div class="weui-form-preview__bd">

<%each log.ziduan as zklog zv%>
<div class="weui-form-preview__item">
<label class="weui-form-preview__label"><%zklog.title%></label>
<span class="weui-form-preview__value"><%log[zv].data%></span>
</div>

<%/each%>
</div>
</div><br>

<%/each%>
</script>

========================

js代码，红色为页面模板名称

<script id=‘tpl_empty‘ type=‘text/html‘>
<div class="credit_no"><i class="fa fa-file-text-o" style="font-size:100px;"></i><br><span style="line-height:18px; font-size:16px;">暂无信息</span></div>
</script>
<script language="javascript">
var page = 1;
var scrolled = false;
var current_type = "{php echo intval($_GPC[‘type‘])}";
require([‘tpl‘, ‘core‘], function (tpl, core) {

function bindScroller(){
var loaded = false;
var stop = true;

$(window).scroll(function () {
if (loaded) {
return;
}
totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
if ($(document).height() <= totalheight) {

if (stop == true) {
stop = false; scrolled = true;
$(‘#container‘).append(‘<div id="credit_loading" class="credit_loading_zzjz"><i class="fa fa-spinner fa-spin"></i> 正在加载...</div>‘);
setTimeout(function(){
$(".credit_loading_zzjz").remove()
},2000);

page++;
core.json(‘wdyy‘, {type:current_type,page: page}, function (json) {
stop = true;
var morejson = json;
$(‘#credit_loading‘).remove();
$("#container").append(tpl(‘tpl_log‘,morejson.result));
if (morejson.result.list.length < morejson.result.pagesize) {
$("#container").append(‘<div id="credit_loading">已经加载完全部记录</div>‘);
loaded = true;
$(window).scroll = null;
return;
}
}, true);
}
}
});
}
function getLog(type) {
$(‘.weui-navbar__item‘).removeClass(‘weui-bar__item_on‘);
$(‘.weui-navbar__item[data-type=‘ + type + ‘]‘).addClass(‘weui-bar__item_on‘);
core.json(‘wdyy‘, {type:type,page: page}, function (json) {
if (json.result.list.length <= 0) {
$(‘#container‘).html(tpl(‘tpl_empty‘));
return;
}
$(‘#container‘).html(tpl(‘tpl_log‘, json.result));
bindScroller();
}, true);
}
$(‘.weui-navbar__item‘).unbind(‘click‘).click(function () {
page = 1; current_type = $(this).data(‘type‘)
getLog(current_type);

});
getLog(current_type);
})
</script>

2.php页面

public function show_json($status = 1, $return = null)
{//分页的函数
$ret = array(
‘status‘ => $status
);
if ($return) {
$ret[‘result‘] = $return;
}
die(json_encode($ret));
}

=================================================

页码定义

$page=(int)($_GET[‘page‘]);
if(empty($page)||!isset($page)){
$page=1;
}
$pagesize=10;

 

返回方式

if ($_W[‘isajax‘]) {

$this->show_json(1, array(
‘pagesize‘=>$pagesize,
‘list‘ => $xmlist
));
}