微擎框架下拉分页(使用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
));
}
===============
3.其他文件云盘下载链接: http://pan.baidu.com/s/1gf5VgqB 密码: dhus(有多余的文件么有删除掉)
4.core cofig 那几个js文件里面有一些路径要改一下的
《完》
微擎框架下拉分页(使用js模板引擎)的更多相关文章
- laravel 框架 下拉分页
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- think php 框架下拉分页
//以对象的形式获取数据库$data变量的信息,将lastPage()传输至页面 $lastpage = $data->lastPage(); $this->assign('lastpag ...
- 使用新一代js模板引擎NornJ提升React.js开发体验
当前的前端世界中有很多著名的开源javascript模板引擎如Handlebars.Nunjucks.EJS等等,相信很多人对它们都并不陌生. js模板引擎的现状 通常来讲,这些js模板引擎项目都有一 ...
- tab切换中的滚动条下拉分页带来的问题
相信做过tab切换中滚动条下拉分页的童鞋都知道,我们在用scroll方法来做滚动条下拉分页的时候,都是有bug,切换中间的内容会互相影响,为了解决这个问题,我总结了2种方法: 1.方法一: <! ...
- 小书MybatisPlus第4篇-表格分页与下拉分页查询
本文为mybatis系列文档的第4篇,前三篇请访问下面的网址. 小书MybatisPlus第1篇-整合SpringBoot快速开始增删改查 小书MybatisPlus第2篇-条件构造器的应用及总结 小 ...
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...
- 非常实用的select下拉框-Select2.js
在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...
- 学习在requirejs下如何使用underscore.js模板
近期在学习underscore.js 这个小而美的js库,是前端 MVC 框架backbone依赖库,他的模板方法主要应用场景是ajax交互过程到页面需要大量的字符串拼接,这部分如果一旦不够仔细就很容 ...
- Epii.js 一个极其简单的Js模板引擎
Epii.js 简约而不简单的Js模板引擎 Epii.js 简约而不简单的JavaScript模板引擎 # 特性 一个轻量级模板引擎,可快速实现数据与ui绑定(数据变动,UI自动变动),快速实现事件绑 ...
随机推荐
- 深入Spring Boot:怎样排查 Cannot determine embedded database driver class for database type NONE
ref:https://www.journaldev.com/13830/spring-boot-cannot-determine-embedded-database-driver-class-for ...
- IntelliJ IDEA 编译代码报错 找不到符号 符号: 找不到符号包 包
在使用IDEA的时候,经常出现过找不到包或者找不到符号的情况,可以尝试以下几种方式来解决 1.如果项目使用的是Maven可以使用Maven-Reimport 2.还可以 Invalidate and ...
- myeclipse内存调整
内存调整: myeclipse.ini里配置后 1.设置Default VM Arguments 在myEclipse中,打开Windows-> Preferences->Java-> ...
- 以虎嗅网4W+文章的文本挖掘为例,展现数据分析的一整套流程
本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 本文作者将结合自身经验,并以实际案例的形式进行呈现,涉及从 ...
- Android内存泄漏原因
这段时间调试APP的时候,发现程序在加载了过多的bitmap后会崩溃.查看了日志,原来是发生了内存溢出(OOM).第一次遇到这样的问题,那就慢慢排查吧. 内存优化可以参考胡凯大神的博客Android内 ...
- opencv画出轮廓外接矩形
Mat cannyImage; /// Detect edges using canny Canny(src, cannyImage, , , ); vector<vector<Point ...
- 转载:return *this和return this
文章出处,感谢分享http://blog.csdn.net/stpeace/article/details/22220777 别跟我说, return *this返回当前对象, return this ...
- python 阿狸的进阶之路(4)
装饰器 #1.开放封闭原则:对扩展开放,对修改是封闭#2.装饰器:装饰它人的,器指的是任意可调用对象,现在的场景装饰器->函数,被装饰的对象也是->函数#原则:1.不修改被装饰对象的源代码 ...
- 函数参数,const 引用 和 非 const引用是不同的函数。
举个例子, void f(const int &x) 和 void f(int &x) 是不同的函数. 函数的返回值不能作为区分
- 各种Queue分析
Queue主要方法的区别: 抛出异常 返回特殊值 插入 add(e)插入成功则返回true,没有可用空间则IllegalStateException offer(e) 移除 remove(e)获取 ...