微擎框架下拉分页(使用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自动变动),快速实现事件绑 ...
随机推荐
- DRF 版本 及认证
版本控制 -- # 初始化我们的版本 version, scheme = self.determine_version(request, *args, **kwargs) request.v ...
- JVM总结-异常处理
众所周知,异常处理的两大组成要素是抛出异常和捕获异常.这两大要素共同实现程序控制流的非正常转移. 抛出异常可分为显式和隐式两种.显式抛异常的主体是应用程序,它指的是在程序中使用“throw”关键字,手 ...
- MySQL----ERROR 1071 (42000): Specified key was too long; max key length is 767 bytes
1.问题描述 在导入同事提供的一个sql文件时候,出现了一个1071错误,总结学习一下: 2.分析问题 错误的字面意思是说mysql字段设置的值太长了,不能大于767个字节,在网上找了一些资料后才知道 ...
- IOC 框架
1 IoC理论的背景 我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象 如果我们 ...
- UVA-10020-贪心
题意:给你一些数轴上的线段,要求寻找出某些线段能够完全覆盖[0,M],并且取的线段数目最小. 解题思路: 贪心思路, 1.每个线段都有一个L和R,代表它的起点和终点,对于所有R <= 0 , ...
- eclipse创建的maven项目中使用javafx
类似普通maven项目,不需要特地创建javafx项目. 将fxml资源文件放在resource目录下即可.
- 如何利用Social Listening从社会化媒体中“提炼”有价值的信息?
本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 在本文中,笔者将会介绍大数据分析主要的处对象---社会化媒 ...
- C# NPOI生成Excel文档(简单样式)
效果图: 代码: /// <summary> /// 导出Excel /// </summary> /// <param name="DeptId" ...
- GIFDecoder源码分析
源码见:ddxxll2008/gifdecoder_java run() public void run(){ if(in != null){ readStream(); }else if(gifDa ...
- spring boot 整合redis --sea 方式1
application.properties # REDIS (RedisProperties) # Redis数据库索引(默认为0) spring.redis.database=0 # Redis服 ...