jquery 上滑加载更多
$(document).ready(function() {
var totalPage = {$totalPage};//总页数
var page = {$page}; //起始页
var pageSize = {$pageSize} //每页显示个数
$(window).scroll(function() {
if(totalPage-page>0){
//滚动条到达底部加载
if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
setTimeout(function() {
$.ajax({
type: 'GET',
url: '?m=wap&c=vedio&a=art_more&typeid=93&yp=128&pageNum='+(page+1),
success:function(data){
var msg=eval(data);
$.each(msg, function (i, item) {
$('.art-list').append("<li><a href="+item.art_link+">"+item.title+"</a></li>");
});
page=page+1;
},
error:function(data){
$("#nomore").html("加载失败...");
setTimeout(function() {
$("#nomore").html();
}, 3000);
},
});
}, 200);
}
}else{
$("#nomore").html("我是有底线的...");
setTimeout(function() {
$("#nomore").empty();
}, 3000);
}
});
});
页面:
<ul class="art-list">
{loop $art_all $k $v}
<li><a href="#">{$v['title']}</a></li>
{/loop}
</ul>
<div id="nomore" style="text-align:center;color:gray"></div>
控制器:
$this->ys = pc_base::load_model('artarea_model');
$page=intval($_GET['pageNum'])?intval($_GET['pageNum']):1; //当前页
$res=$this->ys->select('',"id");
$total=count($res); //文章总数
$pageSize =3; //每页显示条数
$starpage=($page-1)*$pageSize;//起始数据
$totalPage =ceil($total/$pageSize); //总页数
$sql="select a.*,b.pic_more from v9_artarea a left join v9_artarea_data b on a.id=b.id order by a.inputtime desc limit $starpage,$pageSize ";
$art_obj=$this->ys->query($sql);
foreach ($art_obj as$k=> $v){
$v['pic_more']=string2array($v['pic_more']);
$art_all[]=$v; //艺术圈文章列表
}
more
public function art_more(){
$this->ys = pc_base::load_model('artarea_model');
$page=intval($_GET['pageNum']);
$res=$this->ys->select('',"id");
$total=count($res); //文章总数
$pageSize =3; //每页显示条数
$starpage=($page-1)*$pageSize;//起始数据
$totalPage =ceil($total/$pageSize); //总页数
// if($page>$totalPage){
// return json_encode('error');
// }else{
$sql="select a.*,b.pic_more from v9_artarea a left join v9_artarea_data b on a.id=b.id order by a.inputtime desc limit $starpage,$pageSize ";
$art_obj=$this->ys->query($sql);
foreach ($art_obj as$k=> $v){
$v['pic_more']=string2array($v['pic_more']);
$art_all[]=$v; //艺术圈文章列表
}
echo json_encode($art_all);
// }
}
jquery 上滑加载更多的更多相关文章
- vue 上滑加载更多
移动端网页的上滑加载更多,其实就是滑动+分页的实现. <template> <div> <p class="footer-text">--{{f ...
- jQuery上拉加载更多
<header id="header">首 页</header> <section id="main"> <ul id ...
- Android如何定制一个下拉刷新,上滑加载更多的容器
前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...
- 使用jquery.more.js上滑加载更多
html: <div id="more"> <div class="single_item"> <div class=" ...
- Android的ListView分页功能(上滑加载更多)
今天主要工作是将之前实现的各种ListView显示全部信息,优化成了每次加载几条数据,然后上滑的时候加载更多,底部显示一个进度条和一个文字提示,然后加载完毕后,将提示信息隐藏. 一边看教学视频一遍敲代 ...
- 移动端web页面上滑加载更多功能
背景介绍: 开发企业微信的一个应用,实现在企业微信中调用自己程序页面,页面加载多模块数据,向下滑加载更多,等等等等,一波三折 然后很早就成功了是这样实现的: html: <div id=&quo ...
- 微信小程序上滑加载更多
onReachBottom: function () { var that = this var limit = that.data.limit var count = that.data.count ...
- APICloud 上滑加载更多
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- jq上滑加载更多
html 结构 <div id="main"> <ul class="order-list" id="list_box"& ...
随机推荐
- EF中关于日期字值的处理
一.SQL语句方式 var datefrom = DateTime.Parse(fromdate); var dateto = DateTime.Parse(todate); var sql = ...
- orangepi one AP模式配置
前两天买了一块orangepi one开发板,目的是做个局域网共享目录,具体共享协议用samba:这块板子有两个网卡,一个有线一个无线:有线主要用来ssh登陆调试,修改配置. 首先下载armbian的 ...
- Oracle单机Rman笔记[4]---RMAN联机备份
备注:RMAN备份(仅支持基于spfile的备份,不支持基于init.ora配置的备份) 练习:开启ARCHIVELOG模式 \为归档的重做日志被指FRA和单独的归档日志目标 SQL>show ...
- mysql查询表字段名称,字段类型
select column_name,column_comment,data_type from information_schema.columns where table_name='查询表名称' ...
- Forth 内部解释程序工作流程
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- flex布局-弹性布局
弹性布局当前应用的非常广泛,特别是移动端,记得第一次用reactNative 写代码的时候是最开始真正接触Flex布局.1.首先最外层的容器需要指定为display:flex;由于flex的兼容版本还 ...
- Windows安装nvm和node, 以及安装live-server
nvm下载源https://github.com/coreybutler/nvm-windows/releases 参考博客: 主要https://www.cnblogs.com/hamsterPP/ ...
- 电脑小白和ta的小白电脑——MySQL数据库
数据库我选择了MySQL,因为据说MySQL是最流行的关系型数据库管理系统,在WEB应用方面 MySQL 是最好的RDBMS之一了,而且,免费呀! MySQL数据库开发环境的配置 (一)下载MySQL ...
- Eclipse远程调试+FTPClient在jdk6以上写法不兼容问题的排查
业务场景: 应业务新需求的UAT测试,需要部署一份新tomcat到测试环境.新环境正常启动并运行了一天,没太大差错.但今天发现原本在另一个老的tomcat下运行的好好的FTP上传文件模块突然出了问题. ...
- linux c TCP连接通讯
服务端: 1.申请服务端自己的socket 2.对addr赋值 3.bind文件描述符和地址信息 4.listen监听服务 5.等待accept客户端的连接 6.处理建立好的连接 7.关闭socket ...