jquery列表自动加载更多
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{$Think.lang.E160}</title>
<link href="__CSS__/css.css" rel="stylesheet">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<script src="__JS__/jquery-1.11.1.min.js"></script>
<script>
var cur_page = 1;
var max_page = 0;
var page_size = 15;
function get_content(){
var str = '';
$.post("__URL__/getSysList", {'size':page_size, 'page':cur_page, 'max_page':max_page}, function(s){
$('#getMore').hide(); s = $.parseJSON(s); //首页进入时的首次加载
if(max_page==0) max_page = parseInt(s.maxPage);
for(i in s.list){
str += '<div class="xttz">'+
' <div class="tzyi"><span>'+ s.list[i].sysm_date.date.split(' ')[0] +'</span><b>'+ s.list[i].sysm_title + '</b></div>'+
' <div class="tznr">'+ s.list[i].sysm_content +'</div>'+
'</div>';
} cur_page++;
$("#list_box").append(str);
});
}
$(function(){ //页面回退时优先加载缓存,并自动滚动到原阅读位置
var con = localStorage.getItem("active_list_con");
if(con){
cur_page = localStorage.getItem("active_list_page");
max_page = localStorage.getItem("active_list_maxpage");
$("#list_box").append(con);
$("html,body").scrollTop(localStorage.getItem("active_list_scroll"));
}else{
//页面进入时自动第一次加载内容
get_content();
}
$(window).scroll(function() {
if (($(window).scrollTop() || window.scrollY) + $(window).height() == $(document).height() && cur_page != max_page) {
$('#getMore').show();
get_content();
//加入缓存
localStorage.setItem("active_list_con", $("#list_box").html()); //已加载的浏览内容
localStorage.setItem("active_list_maxpage", max_page); //当前页面总页数
localStorage.setItem("active_list_page", cur_page); //当前页数
localStorage.setItem("active_list_scroll", $(window).scrollTop()); //当前浏览位置
}
}); });
</script> <link href="__CSS__/common.css" rel="stylesheet" type="text/css">
</head> <body>
<div class="top"><span><a href="/index.php/Index/Thenews/thenews"><img src="__IMG__/topjt.png" width="70%"></a></span>{$Think.lang.E160}</div> <div id="list_box"></div> <div id="getMore" style="position:fixed; left:10%; bottom:0; opacity:0.7; width:80%; height:40px; line-height:40px; border-radius:6px 6px 0 0; background:#fff; color:#000; text-align:center;">更多内容正在加载...</div> </body>
</html>
//ajax-分页获取最新通知
public function getSysList(){
//设置where条件
$where = "sysm_status=0"; $lang = strtolower(cookie('think_language'))=='en-us' ? 2 : 1;
$where .= " and sysm_lang={$lang}"; //分页查询
$page = I('post.page', 1, 'intval');
$pageSize = I('post.size', 15, 'intval');
$maxPage = I('post.max_page', 0, 'intval');
$n = $page * $pageSize; //总页数,第一次获取的时候查询
if($maxPage==0){
$count = M()->query("select count(0) as count from SystemMessages where {$where}");
$max_page = ceil($count[0]['count'] / $pageSize);
} $SQL = "SELECT a.sysmid, a.sysm_title, a.sysm_content, a.sysm_date FROM SystemMessages a, (SELECT TOP {$pageSize} sysmid FROM ( SELECT TOP {$n} sysmid FROM SystemMessages WHERE {$where} ORDER BY sysmid DESC ) t ORDER BY t.sysmid ASC ) b WHERE a.sysmid = b.sysmid ORDER BY a.sysmid DESC";
$list = M()->query($SQL); $result = ['maxPage'=>$max_page, 'list'=>$list];
die(json($result));
}
jquery列表自动加载更多的更多相关文章
- jQuery自动加载更多程序
1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...
- 基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...
- jQuery自动加载更多程序(转)
jQuery自动加载更多程序 1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据 ...
- UWP-ListView到底部自动加载更多数据
原文:UWP-ListView到底部自动加载更多数据 ListView绑定的数据当需要“更多”时自动加载 ListView划到底部后,绑定的ObservableCollection列表数据需要加载的更 ...
- ListView下拉刷新,上拉自动加载更多
下拉刷新,Android中非常普遍的功能.为了方便便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能.设计最初是参考开源中国的Android客户端源码.先看示例图. ...
- jQuery上拉加载更多
<header id="header">首 页</header> <section id="main"> <ul id ...
- Jquery点击加载更多
一.点击加载更多有点像分页获取数据类似,下面是本人写的一个简单的小例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- 实现Android ListView 自动加载更多内容
研究了几个小时终于实现了Android ListView 自动加载的效果. 说说我是怎样实现的.分享给大家. 1.给ListView增加一个FooterView,调用addFooterView(foo ...
- Android RecyclerView 瀑布流滑动到最后自动加载更多
mRecycleView.setOnScrollListener(new RecyclerView.OnScrollListener(){ //用来标记是否正在向最后一个滑动,既是否向下滑动 bool ...
随机推荐
- Gym 100989E 字符串
Description standard input/output Islam is usually in a hurry. He often types his passwords incorrec ...
- 完善慕课网Vue2.0购物车功能
vue一个Made in China创造出来的框架真的很66666~ 如果你是刚入门还不太懂也没有看慕课网上这门视频的,请先看一遍或许你会收获满满~ 使用vue2.0实现购物车和地址选配功能这门课程, ...
- cmd窗口情况下:windows下cmd默认的编码是GBK
想在windows下查看sqlite的utf-8中文需要先 执行chcp 65001把当前页换为utf-8编码 chcp 命令: chcp 65001 就是换成UTF-8代码页,在命令行标题栏上点击 ...
- sokect数据压缩实现
上一篇文章说到了用Java Socket来传输对象,但是在有些情况下比如网络环境不好或者对象比较大的情况下需要把数据对象进行压缩然后在传输,此时就需要压缩这些对象流,此时就 可以GZIPInputSt ...
- 七、Ubuntu 关机或者重启
重启命令:1.reboot2.shutdown -r now 立刻重启(root用户使用)3.shutdown -r 10 过10分钟自动重启(root用户使用)4.shutdown -r 20:35 ...
- Java编程风格学习(一)
最近在看一本有关Java编程规范的书,书中精炼阐述了使用java语言时应该遵循的一些原则.接下来的一段时间我将在这里总结我的学习内容,也希望这一系列文章能够对有需要的人有所帮助.不考虑任何编码规范的代 ...
- Redis 批量删除Redis的key 正则匹配删除
del 删除单个key方便 要是删除多个就不是很方便了 这时候可以使用xsrsg来批量删除 1.退出redis 2.匹配CCPAI:开头的所有key*删除 redis-cli -a 密码 -h hos ...
- CSU 1777: 大还是小?【模拟/后导0】
293419 roniking 1777 Accepted 2032 0 C++ 2000 2018-04-03 19:21:25 Description 输入两个实数,判断第一个数大,第二个数大还是 ...
- 第十二届北航程序设计竞赛决赛网络同步赛 J题 两点之间
题目链接 Problem J 这道题思路还是很直观的,但是有两个难点: 1.题目中说$1<=NM<=10^{6}$,但没具体说明$N$和$M$的值,也就是可能出现: $N = 1, M ...
- 转:GEF 英文全称Graphical Editor Framework
http://blog.csdn.net/chancein007/article/category/2713827