微擎框架下拉分页(使用js模板引擎)

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
));
}

时间: 2024-08-20 12:47:00

微擎框架下拉分页(使用js模板引擎)的相关文章

PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) , 已有13次阅读 ,共0个评论 依照我一惯得套路,我会先说一点废话. PhoneGap和Cordova什么关系?为什么有的地方叫Cordova而有的地方叫PhoneGap ?PhoneGap是一款HTML5平台.通过它,开发商能够使用HTML.CSS及JavaScript来开发本地移动应用程序.因此,眼下开

360浏览器搜索框下拉选择图片js模拟select效果

最近360浏览器网址导航的主页增加了一个下拉选择图片搜索的功能,也就是用js模拟出了select的效果,今天在单位闲了无事干,就把空上功能给摸索出来了,虽然做的不是太完善,但对要求不高的用户来说,已经可以了,而且也可以为学习Js的朋友提供参考. <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>

js模板引擎--artTemplate

js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址),貌似最近耳边听到得最多的模板引擎也就是artTemplate了,所以就花个时间来研究下吧... artTemplate是新一代的javascript模板引擎,若采用拥有V8引擎的chrome浏览器进行测试,其渲染性能甚至能达到知名模板引擎Mustache的20倍以上以及模板引擎tmpl的40倍以上

JS模板引擎

JS模板引擎 :ArtTemplate 1.为什么需要用到模板引擎 我们在做前端开发的时候,有时候经常需要根据后端返回的json数据,然后来生成html,再显示到页面中去. 例如这样子: var data = [ {text: "测试一"}, {text: "测试二"}, {text: "测试三"}, {text: "测试四"} ]; function generateList(data) { var listHtml = &

js模板引擎介绍搜集

js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTemplate等),如何从这么多纷繁的模板引擎中选择一款适合自己的呢,笔者最近对主流的js模板引擎(mustache,doT,juicer,artTemplate,baiduTemplate,Handlebars,Underscore)做了一番调研,分享出来希望对大家有用. 从这几个指标来比较js模板

调研js模板引擎

js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTemplate等),如何从这么多纷繁的模板引擎中选择一款适合自己的呢,笔者最近对主流的js模板引擎(mustache,doT,juicer,artTemplate,baiduTemplate,Handlebars,Underscore)做了一番调研,分享出来希望对大家有用. 从这几个指标来比较js模板

JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemplate. 项目之初用的是BaiduTemplate引擎,项目完成后发布到互联网,发现数据量大时,加载速度慢了点,就考虑换其它模板引擎是否能提高渲染效率,在网上查找.对比后发现ArtTemplate更好一点,就深入了解与学习了下,两个引擎语法有点差别,但结果是一至的,下面具体介绍一下两个引擎的使用情

掌握js模板引擎

最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一种痛苦. 听过这样一句话:"技术没有缺席,只有姗姗来迟",很多技术自己不知道,并非没有.今天我想介绍的就是一个简单的js模板引擎artTemplate,让我们扬帆起航吧- 一.概述 artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充

百度JS模板引擎 baiduTemplate 1.0.6 版

A.baiduTemplate 简介 0.baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 注:等不及可以直接点左侧导航中的”C.使用举例“,demo即刻试用. 1.应用场景: 前端使用的模板系统 或 后端Javascript环境发布页面 http://tangram.baidu.com/BaiduTemplate 2.功能概述: 提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据, 生成对应数据产生的HTML片段,渲染不同的效果. 3.特性: 1.语法简单,学