织梦ajax加载文章列表,织梦dedecms首页列表页ajax点击下拉加载更多文章瀑布流效果...
织梦dedecms实现点击下拉加载更多主要用到ajax技术。具体步骤如下:
一、首先找到并打开/plus/list.PHP文件,在里面找到如下代码:
require_once(dirname(__FILE__)."/../include/common.inc.php");
在这段代码下面添加以下代码:
//列表页瀑布流无限加载代码
if(isset($_GET['ajax'])){
$typeid = isset($_GET['typeid']) ? intval($_GET['typeid']): 0;//传递过来的分类ID
$page = isset($_GET['page']) ? intval($_GET['page']): 0;//页码
$pagesize = isset($_GET['pagesize']) ? intval($_GET['pagesize']): 15;//每页多少条,也就是一次加载多少条数据
$start = $page>0 ? ($page-1)*$pagesize : 0;//数据获取的起始位置。即limit条件的第一个参数。
$typesql = $typeid ? " WHERE typeid=$typeid" : '';//这个是用于首页实现瀑布流加载,因为首页加载数据是无需分类的,所以要加以判断,如果无需
$total_sql = "SELECT COUNT(id) as num FROM `dede_archives` $typesql ";
$temp = $dsql->GetOne($total_sql);
$total = 0;//数据总数
$load_num =0;
if(is_array($temp)){
$load_num= round(($temp['num']-15)/$pagesize);//要加载的次数,因为默认已经加载了
$total = $temp['num'];
}
$sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath
FROM `dede_archives` as a JOIN `dede_arctype` AS t ON a.typeid=t.id $typesql ORDER BY id DESC LIMIT $start,$pagesize";
$dsql->SetQuery($sql);
$dsql->Execute('list');
$statu = 0;//是否有数据,默认没有数据
$data = array();
$index = 0;
while($row = $dsql->GetArray("list")){
$row['info'] = $row['info'] = $row['infos'] = cn_substr($row['description'],160);
$row['id'] = $row['id'];
$row['filename'] = $row['arcurl'] = GetFileUrl($row['id'],
$row['typeid'],$row['senddate'],$row['title'],$row['ismake'],
$row['arcrank'],$row['namerule'],$row['typedir'],$row['money'],
$row['filename'],$row['moresite'],$row['siteurl'],$row['sitepath']);
$row['typeurl'] = GetTypeUrl($row['typeid'],$row['typedir'],
$row['isdefault'],$row['defaultname'],$row['ispart'],
$row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']);
if($row['litpic'] == '-' || $row['litpic'] == ''){
$row['litpic'] = $GLOBALS['cfg_cmspath'].'/images/defaultpic.gif';
}
if(!preg_match("#^http:\/\/#i", $row['litpic']) &&$GLOBALS['cfg_multi_site'] == 'Y'){
$row['litpic'] = $GLOBALS['cfg_mainsite'].$row['litpic'];
}
$row['picname'] = $row['litpic'];//缩略图
//$row['stime'] = GetDateMK($row['pubdate']);
$row['stime'] = date('Y-m-d H:i', $row['pubdate']);
$row['click'] = $row['click'];
$row['typelink'] = "".$row['typename']."";//分类链
$row['fulltitle'] = $row['title'];//完整的标题
$row['shorttitle'] = $row['shorttitle'];//副标题
$row['title'] = cn_substr($row['title'], 80);//截取后的标题
$data[$index] = $row;
$index++;
}
if(!empty($data)){
$statu = 1;//有数据
}
$result =array('statu'=>$statu,'list'=>$data,'total'=>$total,'load_num'=>$load_num);
echo json_encode($result);//返回数据
exit();
}
二、然后在需要使用瀑布流无线加载的织梦dedecms模板里引用下面这个js代码(这个js大家应该不是很陌生,只要有用到JQ库函数的话一定要引用这个js):
三、并在模板底部添加以下代码:
var loadConfig = {
url_api:'/plus/list.php',
typeid:{dede:field name="typeid"/},
page:2,
pagesize:15, //这个就是滑动一次添加几条信息的参数设置
loading : 0,
}
function loadMoreApply(){
if(loadConfig.loading == 0){
var typeid = loadConfig.typeid;
var page = loadConfig.page;
var pagesize = loadConfig.pagesize;
var url = loadConfig.url_api,data={ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize};
var sTop = document.body.scrollTop || document.documentElement.scrollTop, dHeight = $(document).height(), cHeight = document.documentElement.clientHeight;
console.log(dHeight);
if (sTop + cHeight >= dHeight - cHeight) {
loadConfig.loading = 1;
function ajax(url, data) {
$.ajax({url: url,data: data,async: false,type: 'GET',dataType: 'json',success: function(data) {
addContent(data);
}});
}
ajax(url,data);
}
}
}
function addContent (rs){
if(rs.statu== 1){
var data = rs.list;
var total = rs.total;
var arr=[];
var length = data.length;
for(var i=0;i
arr.push('');
arr.push('
arr.push('
');
arr.push('');
arr.push('
');
arr.push('
');
arr.push('
'+data[i].title+'
');
arr.push('
arr.push('');
arr.push(data[i].click);
arr.push('');
arr.push('');
arr.push('
');
arr.push('
');
arr.push('
');
arr.push('');
arr.push('');
}
$('.arclist').append(arr.join(''));
loadConfig.load_num = rs.load_num;
if(total loadConfig.load_num){
window.removeEventListener('srcoll',loadMoreApply,false);
}
loadConfig.page++;
loadConfig.loading = 0;
}
}
function pullLoad(){
window.addEventListener('scroll', loadMoreApply, false);
}
pullLoad();
上面的代码中的$('.arclist').append(arr.join(''));里的arclist对应模板内列表的外框class属性。
arr.push部分对应的是列表中单篇文章的代码。
如果在首页只需把代码中的”typeid:{dede:field name="typeid"/}“ 修改为”typeid:0,“即可。
到此织梦dedecms瀑布流无限加载就实现了。
织梦ajax加载文章列表,织梦dedecms首页列表页ajax点击下拉加载更多文章瀑布流效果...相关推荐
- ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. ...
- Vue 实现下拉加载更多
熟悉Element-UI的开发者可能都会有这样的经历,它的无限滚动 InfiniteScroll 并不好用,下面介绍两种下拉加载的实现方法: 1. 使用el-table-infinite-scroll ...
- 微信小程序下拉刷新列表onPullDownRefresh;微信小程序上划加载列表onReachBottom;uni-app微信小程序下拉加载数据;uni-app微信小程序上划页面加载数据
需求:微信小程序列表加载有两种方式,分别是按住页面下拉加载数据数据(触发onPullDownRefresh)和直接上划滚动页面到底部加载数据(触发onReachBottom函数). 本文主要是使用上划 ...
- jq 下拉加载每次只执行一次_记一次 无限列表 滚动优化
背景 长列表优化, 是页面性能优化中的一个比较常见的问题,也是面试中的常客. 刚好最近在的项目中, 遇到了一个长列表的性能问题,试过多种方案, 最后得以解决. 今天就给大家分享一下. 正文 场景描述 ...
- 不使用输入框如何实现下拉_使用INFINITE AJAX SCROLL实现下拉加载效果
现在很多网页都有个体验不错的效果:浏览到页面底部的时候,自动加载下一页内容,也就是下拉加载效果,这种效果可以让用户不用点击"下一页"按钮,也可以实现翻页,无论在PC还是手机上,体验 ...
- uniapp小程序如何通过虚拟列表配合节流,完成上拉刷新下拉加载,避免页面卡顿,提升性能呢?
本文将介绍uniapp小程序中如何使用虚拟列表和节流两种技术实现上拉刷新下拉加载功能,同时避免因渲染大量数据导致的页面卡顿问题. 一.虚拟列表 在uniapp小程序开发中,当我们需要渲染大量列表数据时 ...
- listview 刷新结束 监听_Flutter 开发从 0 到 1(四)ListView 下拉加载和加载更多
在<APP 开发从 0 到 1(三)布局与 ListView>我们完成了 ListView,这篇文章将做 ListView 下拉加载和加载更多. ListView 下拉加载 Flutter ...
- html5页面下拉加载更多_使您的产品页面销售更多的5条提示
html5页面下拉加载更多 Getting visitors to your website requires a great deal of work and, for many businesse ...
- html下拉自动加载更多,H5页面下拉加载更多(实用版)
近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有. 醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件 还可以,但是 ...
最新文章
- javascript内置顶层函数
- hive性能调优实战pdf_1分钟带你入门JVM性能调优,实战解析调优工具
- win7安装laravel
- 自定义工具类:导入工具类测试
- 线段树的入门级 总结
- 个性化推荐的另一种思路: 学习用户行为的解纠缠表示
- Windows 10如何强制删除多余的语言包
- matlab bar 填充花纹,科学网—使用matlab绘画柱状图,且使用不同的图案填充 - 时杰的博文...
- Finalize/Dispose资源清理模式
- CVS常用命令速查手册
- ANT的环境搭建和开发
- Linux驱动开发|UART驱动
- 数字万用表性能指标介绍
- arm的一些概念(ARM9、Cortex的区别)
- 2021-11-07 c语言之不变初心数
- 《鸟哥的Linux私房菜》chapter9 20180818~20180826
- 第二阶段(day07)bootstrap
- Ableton Live 11 Suite v11.1.0 WiN-MAC 电音制作宿主软件
- VBA操作WORD(三):设置页面
- 我是如何将Pluto作为library分享到jCenter
热门文章
- C++ 多态的实现及原理
- csuoj 1355: 地雷清除计划
- lua java效率_luaJavaBridge详解
- 枚举算法:概率计算。在标注编号分别为1,2,...,n的n张牌中抽取3张,试求抽出3张牌编号之和为素数的概率。输入整数n(3<n<=3000),输出对应的概率(四舍五入到小数点后第3位)。
- Python+pywin32批量转换Word文件为PDF文件
- Python中的偏函数和函数柯里化
- go 查找模块位置_如何使用Go语言插件功能?
- 网络 HTTP状态码大全
- PHP中类重写方法,php中重写方法有什么规则
- C语言int的字节数跟什么有关,C语言中int型字长和什么有关