phpcms 分页样式ajax手机板滚动自动下拉分页怎么做

查看: 693|回复: 4
V9怎么实现新闻列表也局部刷新分页的功能
& & & & 最近想弄一下新闻列表的局部刷新分页的功能,希望大神指导指导!& & & & & & & &
什么是局部刷新 有没参考的网址
ajax刷新。&&这个呢,&&难者不会, 会者不难。&&需要在控制器增加对应的处理函数。 前端 后端网上都有很多例子 可以参考。
哈哈,100元我帮你做
inform标签就能解决,把新闻分模块,各个模块分开成独立的部分
Powered by如何抓取Js动态生成数据且以滚动页面方式分页的网页
http://my.oschina.net/apdplat/blog/516848
当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢?
如类似今日头条这样的网站:/
我们可以使用Selenium来搞定这件事情。Selenium的设计目的虽然是用于Web应用程序的自动化测试,但是却非常适合用来做数据抓取,可以非常简单地绕过网站的反爬虫限制,因为Selenium直接运行在浏览器中,就像真正的用户在操作一样。
使用Selenium,我们不但可以抓取Js动态生成数据的网页,而且可以抓取以滚动页面方式分页的网页。
首先,我们使用maven引入Selenium依赖:
接下来就可以写代码抓取了:
代码也可以从我的开源项目HtmlExtractor中获取。
这里我们共抓取了6页,每页20条新闻,共120条新闻,代码运行结果如下:
> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!
(此博客文章纯属个人记录,转载请注明出处!) 官方地址:NHtmlUnit 编译获取dll方法: 1.下载nuget.exe (nuget所在网站:http://www.nuget.org/) 2.打开DOS命令对话框,
进入nuget.exe文件所在目录(我的exe文件放在桌面)
3.运行命令安装NHtmlUnit,安装后会在当前目录创建两个文件夹, ...
请假下大家,如何用php抓取 页面上 js动态加载来的内容, file_get_contents 只能获取 用查看源码看到的源码,,其实页面上还有别的内容,请大家给些建议.. 碰巧最近在琢磨类似的功能,虽然还没有实践,但是也来说下个人见解吧 js动态加载的内容如何抓取,我觉得可以分2种情况 第一种:加载的内容通过ajax请求的,那么可以在控制台看下请求的是哪 ...
如题,抓取的时候发现现在很多网站为了效果,一些数据都是用js来渲染,比如下拉加载. 这种情况如果抓取的话,是怎么解决的呢? 看网上有人说用HtmlUnit ,这个貌似最多只能抓取js渲染出来的数据,解决不了下拉加载的问题. 难道真的要对不同的页面进行有针对性的分析,然后解析url,或者ajax的请求? oh,My God! 有没有大牛有更好的解决方案,或者成 ...
如何用python抓取js生成的数据 - SegmentFault如何用python抓取js生成的数据 1赞 踩 收藏想写一个爬虫,但是需要抓去的的数据是js生成的,在源代码里看不到,要怎么才能抓到呢? 最好是用python链接 Yiner月22日提问显示评论 (4条)您还没有登录, 请登录后添加评论得票数 时间先后7 个回答 3赞 踩采 ...
在学习python的时候,一定会遇到网站内容是通过ajax动态请求.异步刷新生成的json数据的情况,并且通过python使用之前爬取静态网页内容的方式是不可以实现的,所以这篇文章将要讲述如果在python中爬取ajax动态生成的数据. 至于读取静态网页内容的方式,有兴趣的可以查看博客内容. 这里我们以爬取淘宝评论为例子讲解一下如何去做到的. 这里主要分为了 ...
在学习python的时候,一定会遇到网站内容是通过 ajax动态请求.异步刷新生成的json数据 的情况,并且通过python使用之前爬取静态网页内容的方式是不可以实现的,所以这篇文章将要讲述如果在python中爬取ajax动态生成的数据.在学习python的时候,一定会遇到网站内容是通过 ajax动态请求.异步刷新生成的json数据 的情况,并且通过pyt ...
很多网站的内容是由JS动态生成的,对于这样的网站查看它的源代码是看不出什么的,常规的爬虫对于这样的网站束手无策.我自己做了一个由JS生成的图片,并成功的用Ghost.py把它爬取了下来. 对于这么个图片看似平常,那么看下它的源代码 从源代码里看不出关于这张图片的地址,而图片的地址是在后端,由JS加载进去的,爬取这类网站需要模拟浏览器执行JS语句,得到执行JS ...
JS动态生成表格后 合并单元格
最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单元格操作,在做之前也试着google下,但是网上没有碰到这方面的需求,所以自己写了一个简单的.用文字描述需求太费劲了,如下图所示:
1. 没有合并之 ...php写app接口怎么做分页,实现下拉显示更多_百度知道广州网站建设(http://www.020jz.org)-广州专业做网站公司
phpcms实现首页和栏目列表页ajax异步点击加载更多
phpcms 在首页和栏目列表页ajax异步点击加载点击加载更多方法介绍。效果如图:
下面介绍phpcms实现列表页ajax异步点击加载点击加载更多方法,具体效果请看我的语录网http://www.020jz.org/:100%;">
$categorys=getcache('category_content_1','commons');
$typeid = isset($_GET['typeid']) ? $categorys[$_GET['typeid']]['arrchildid']: 0;//传递过来的分类ID
$page = isset($_GET['page']) ? intval($_GET['page']): 0;//页码
$pagesize = isset($_GET['pagesize']) ? intval($_GET['pagesize']): 10;//每页多少条,也就是一次加载多少条数据
$start = $page&0 ? ($page-1)*$pagesize : 0;//数据获取的起始位置。即limit条件的第一个参数。
$typesql = $typeid ? & WHERE catid in($typeid)& : '';//这个是用于首页实现瀑布流加载,因为首页加载数据是无需分类的,所以要加以判断,如果无需
$total_sql = &select COUNT(id) as num from 表名 $typesql&;
$get_db=pc_base::load_sys_class(&get_model&, &model&);
$get_db-&sql_query($total_sql);
$temp=$get_db-&fetch_next();
$total = 0;//数据总数
$load_num =0;
if(is_array($temp)){
$load_num= round(($temp['num']-10)/$pagesize);//要加载的次数,因为默认已经加载了
$total = $temp['num'];
$sql = &获取列表sql代码&;
//echo &$sql&;
$get_db-&sql_query($sql);
$statu = 0;//是否有数据,默认没有数据
$data = array();
$index = 0;
while($row = $get_db-&fetch_next()){
$data[$index] = $
if(!empty($data)){
$statu = 1;//有数据
$result =array('statu'=&$statu,'list'=&$data,'total'=&$total,'load_num'=&$load_num);
echo json_encode($result);//返回数据
然后在列表页加入ajax代码:代码如下:
&script type=&text/javascript&&
var loadConfig = {
url_api:'/api.php?op=get_list',
typeid:{$catid},
pagesize:10,
loading : 0,
loadMoreApply(){
if(loadConfig.loading == 0){
var typeid = loadConfig.
var page = loadConfig.
//alert(page);
var pagesize = loadConfig.
var url = loadConfig.url_api,data={typeid:typeid,page:page,pagesize:pagesize};
//var sTop = document.body.scrollTop || document.documentElement.scrollTop, dHeight = $(document).height(), cHeight = document.documentElement.clientH
//console.log(dHeight);
//loadConfig.loading = 1;
function ajax(url, data) {
$.ajax({url: url,data:data,async: false,type: 'GET',dataType: 'json',http://www.020jz.org/: function(data) {
addContent(data);
bdShare.fn.init();
ajax(url,data);
/*$.ajax({url: url,data:data,async: false,type: 'GET',dataType: 'json',http://www.020jz.org/: function(data) {
function addContent (rs){
if(rs.statu== 1){
var data = rs.
var total = rs.
var arr=[];
var len = data.
for(var i=0;i&i++){
//插入列表内容
arr.push('&li&&/li&');
$('#list-article').append(arr.join(''));
loadConfig.load_num = rs.load_
if(total&loadConfig.page*loadConfig.pagesize || loadConfig.page & loadConfig.load_num){
alert(&没有数据了&);
if (typeof document.getElementById(&loadlist&).addEventListener != &undefined&) {
document.getElementById(&loadlist&).removeEventListener('click', loadMoreApply, false);
document.getElementById(&loadlist&).detachEvent(&onclick&,loadMoreApply);
loadConfig.page++;
loadConfig.loading = 0;
function pullLoad(){
if (typeof document.getElementById(&loadlist&).addEventListener != &undefined&) {
document.getElementById(&loadlist&).addEventListener('click', loadMoreApply, false);
document.getElementById(&loadlist&).attachEvent(&onclick&,loadMoreApply);
pullLoad();
phpcms实现列表页ajax异步点击加载点击加载更多方法介绍完结,如有不懂也可以联系我,相互学习,共同进步!本文是作者原创,你也可以扫描下下面支付宝打赏下我咯!谢谢!
如果你觉得这篇文章对你有用,请打赏下我吧!
信守互联空间(西部数码空间)虚拟空间8折且买2年送一年,买3年送2年,买5年送3年优惠
寒江孤影工作室仿站500元起,送空间域名费用,终身免费维护.详情请点击:
原文出自,转载请注明出处:
浏览更多关于
下载次数:142
摘要:这款模板适合产品展销型企业网站。网站功能有:新闻资...
下载次数:112
摘要:这款模板适合产品展销型企业网站。网站功能有:关于我...
下载次数:56
摘要:织梦DEDECMS5.7开发网站模板,网站功能分别有:拍卖征...
下载次数:178
摘要:本模板采用织梦DEDECMS5.7开发的网站模板,网站功能分...
(欢迎加入,共同成长)
PHP学习交流群:
前端学习交流群:
织梦学习交流群:& & &背景:楼主目前在一家做电子商务的公司上班,公司已有成熟的商城系统,社区系统,以及CMS框架。
& & &而做社区的,最大的就是腾讯。今年大概三月份的时候,腾讯推出了微社区。推出了就推出了吧,这也没啥。关键是需要使用的人微信服务号超过10000人关注这就受不了了。我们不能为了使用这个平台而去刷关注吧。而巧的是,这个平台让我们老总给看见了。老总用了几次,甚是欢喜啊。说是未来是移动手机端的时代,手机用户会大大多于PC客户端用户。而我们主要又是卖产品的,总不能叫客户去用腾讯的产品吧,而且人腾讯还不让一般人用。这可如何是好呢?在我们技术团队面前念叨了好几次之后,终于忍不住了,咱们自己照着它开发一套吧。
& & & 咱们自己开发一套?有没有搞错?腾讯那么多人的团队开发出来的产品,要我们这几个人去搞?图1是拉钩网的微社区。
& & & 以上是通过Chrome模拟的Iphone5的界面,Chrome的这一功能真的很强大啊,可以通过浏览器直接模拟各种移动端设备。设置方法:先按F12打开调试面板,然后按Esc启动以下画面,然后就可以切换设备了,完成之后点击Emulate,这样浏览器就可以直接当移动设备了。如图2:
& & & 说到Chrome,之前有段时间服务一直无法访问,现在又可以了,IP:74.125.205.113。
& & & 这个事情从三月份就提出来了啊,由于期间各种任务,都抽不出时间,所以一直拖到了6月中旬。那时候恰好我手上的工作忙得差不多了,于是老总发话了,你来吧。
& & & 由于此时项目组其他同事都还在忙别的活,而老总又觉得这个东西没啥功能,所以我就只能硬着头皮来了。在网上好好的走了一下他的流程。发现具体的功能如下:
& & & 加入小组,发表发话,评论话题,分享话题,赞和取消赞,个人主页,他人主页,Ta的话题,我的话题,我的消息,帖子详情,话题分类,话题列表&&应我们老总的强烈要求,还得加上个人中心,更改头像,更改密码,登录功能,注册功能。
& & & 还好之前PC端SNS部分做得还算熟练,仔细分析了一下技术上基本没什么难点。而数据库表和底层代码都可复用之前PC端的,所以我更是信誓旦旦的承诺,没问题!就这样单枪匹马的就上阵了,后来那个悔啊&&
& & & 实现的详细过程就不细说了,有问题的几个地方这里记录下。
& & & 第一:发布话题,下图(图3)是发布话题页面,这是腾讯官网的。
& & &&从这个图中我们可以看到,这个发表话题是可以发表表情,图片(腾讯官网可以发8张),以及文字的,并且对文字的长度做了限制。做发话题的时候遇到了三个问题,一个是我们之前数据库涉及和底层代码发表话题时仅支持1张图片,这部分由于时间问题就没做修改;一个是这个字数限制:我们都知道textBox可以通过MaxLength属性来设置最大输入字符数。可是通过这个属性设置的一个最大问题就是,不区分中英文。而我们体验一下腾讯的官网就可以知道,他这个字数限制是区分中英文的。之后的解决方案是:绑定这个textBox的input propertychange事件,同时通过脚本计算可输入长度,以下脚本是计算输入字符的长度(区别中英文),但是这样无法避免粘贴时字数超过限制,上图就出现了负数;另外一个问题至今还未解决,哪位同僚有解决方案提供将感激不尽。我们看到那个表情是分不同页的,也就是说可以滑动的!就是这个滑动,至今为找到解决方案。在网上有人说监测TouchStart、TouchMove和TouchEnd事件可以解决,可是试过之后发现结果不太理想啊。所以我这边暂时的解决方案就是点击下边小圆点来实现切换。以下是监测输入字符的长度:&&
//字符长度判断
function textareastrlen(str) {
for (i = 0; i & str. i++) {
if (str.charCodeAt(i) & 255) {
if (len % 2 != 0) {
len = len + 1;
return parseInt(len / 2);
& & &第二个就是查看图片:(以下左图是腾讯官网的图片查看效果,右图是我做出的效果)
& & &开始也是想模拟腾讯的这种效果,直接在上边加一个遮罩层。后来发现这样有问题,腾讯这个只要细看也可以看出问题,遮罩层下边的内容其实在移动。另外一个缺陷就是图片点击放大后,位置控制不好,在PC端位置居中了可是到了手机上位置硬是不能居中,后来无奈之下用了之前用的一款神器插件:,这是一款很强大的图片查看器,还可以自动滑动,详细介绍请看Demo。
& & & 第三个就是今天要给源码的分页问题。一般在PC上我们要分页都是通过上一页和下一页来实现的,可是在手机端如果还通过这种方式分页的话用户的体验会大大的下降,所以就通过当下滑到一定程度的时候自动加载下一页面。而那个程度怎么监测呢,我们可以通过页面上的某个元素来检查。实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加在当前页面。以下是页面代码:
@foreach (var item in Model.TopicList)
&div class="topicBox" id="t_@(Model.Topic.TopicID)"&
& & 注意,由于这里是一个foreach循环,所以我可以监测最后一个class为topicBox的div元素,如果他出现在当前可视区域了,则说明该向后台发请求了。监测是否在可视区域代码:
//判断元素是否进入可视区域
function see(objLiLast) {
//浏览器可视区域的高度
var see = document.documentElement.clientH
//滚动条滑动的距离
var winScroll = $(this).scrollTop();
//距离浏览器顶部的
var lastLisee = $(objLiLast).offset().
return lastLisee & (see + winScroll) ? true : false;
& &发送请求代码:& &
var page = 1;
var pageTotal = parseInt($("#allpage").val());
//是否请求出AJAX的&开关&;
var onOff = true;
$(window).scroll(function () {
//拖动滚条时,是否发送AJAX的一个&开关&
$(".topicBox").each(function () {
//引用最后一个div
var lastLi = $(".topicBox:last");
//调用是否进入可视区域函数
var isSee = see(lastLi);
if (isSee && onOff && page & pageTotal) {//最底部元素可见,开关开启而且还有下拉
$("#loadNext").show(); //显示正在加载图标
onOff = false;
url: "@(ViewBag.BasePath)Home/GetPageData",
type: "POST",
dataType: "Json",
page: page+1
asyc: false,
success: function (result) {
if (result.status == "success") {
var data = result.
for (var i = 0; i & data. i++) {
if (data[i].imageUrl) {//有图片
$("#allThreadList").append('xxx');
} else {//无图片
$("#allThreadList").append('xxx');
$("#t_" + data[i].topicId).append('&div class="topicList" id="topic_' + data[i].topicId + '"&&ul id="replyList_' + data[i].topicId + '" class="replyUl" itemid="' + data[i].topicId + '"& &/ul& &/div&');
var replyList = data[i].replyL
if (replyList) {
if (replyList.length & 3) {//3条评论以上
for (var j = 0; j & 3; j++) {
$("#replyList_" + data[i].topicId).append('&li id="p_6_13" uid="6419340" author="ff。"&&a href="javascript:;" class="sW fl"&&span&' + data[i].replyList[j].replynickName + ':&/span&' + data[i].replyList[j].replyContent + '&/a&&/li&');
$("#topic_" + data[i].topicId).append('&p id="rCount_6" class="more"&&a href="@(ViewBag.BasePath)MSNS/Home/TopicReply/' + data[i].topicId + '?viewName=TopicDetail"&更多&/a&共&span class="replyCount" itemid="' + data[i].topicId + '"&' + data[i].replyList[j].replyCount + '&/span&条评论&/p&');
} else {//评论数小于三条
for (var h = 0; h & replyList. h++) {
$("#replyList_" + data[i].topicId).append('&li id="p_6_13" uid="6419340" author="ff。"&&a href="javascript:;" class="sW fl"&&span&' + data[i].replyList[h].replynickName + ':&/span&' + data[i].replyList[h].replyContent + '&/a&&/li&');
$("#loadNext").hide(); //隐藏正在加载
onOff = true;
& &这是前台请求的代码,注:因为请求回来需要追加的元素较多,所以这里代码会有点乱,但是不影响功能。后台代码:
groupInfo.TopicList = new PagedList&Model.SNS.GroupTopics&(
bllTopic.GetTopicListPageByGroup(GroupId, startIndex, endIndex, false)
, page, pagesize, toalcount);
if (groupInfo.TopicList != null && groupInfo.TopicList.Count & 0)//有话题
Model.SNS.GroupTopics groupT
JsonObject jsonO
List&JsonObject& replyList=new List&JsonObject&();
List&JsonObject& resultList=new List&JsonObject&();
foreach (Model.SNS.GroupTopics item in groupInfo.TopicList)//遍历话题列表
groupTopics = groupTopicsBll.GetModelByCache(item.TopicID);
jsonObject=new JsonObject();
if (null != groupTopics)
if (null != CurrentUser)
cookie = Request.Cookies["topicFav_" + groupTopics.TopicID + CurrentUser.UserID];
if (null != cookie) //取消赞
jsonObject.Put("support", "support");
jsonObject.Put("support", "nosupport");
jsonObject.Put("uid", groupTopics.CreatedUserID);
jsonObject.Put("topicId", groupTopics.TopicID);
jsonObject.Put("nickName",groupTopics.CreatedNickName);
jsonObject.Put("createdDate", ponents.DateTimeHelper.ConvertDateToTime(groupTopics.CreatedDate));
jsonObject.Put("description",Server.HtmlDecode(ViewModel.ViewModelBase.ReplaceFace(groupTopics.Description)));
jsonObject.Put("imageUrl", ponents.FileHelper.GeThumbImage(groupTopics.ImageUrl, "T180X120_"));
jsonObject.Put("ref", groupTopics.ImageUrl);
jsonObject.Put("favCount",groupTopics.FavCount);
List&Model.SNS.GroupTopicReply& list = bllReply.GetTopicReplyByTopic(groupTopics.TopicID, startIndex, endIndex);
if (null != list && list.Count & 0)
foreach (Model.SNS.GroupTopicReply topicReply in list)
reply = new JsonObject();
reply.Put("replynickName", topicReply.ReplyNickName);
reply.Put("replyContent", Server.HtmlDecode(ViewModel.ViewModelBase.ReplaceFace(topicReply.Description)));
reply.Put("replyCount", list.Count);
replyList.Add(reply);
jsonObject.Put("replyList", replyList);
resultList.Add(jsonObject);
// return new Result(ResultStatus.Success,resultList);
json.Put("status", "success");
json.Put("result", resultList);
return Json(json);
&&至此,整个滑动分页就完成了。其他的功能开发起来都还算顺利,如果对功能实现有疑问的欢迎大家一起交流,谢谢。
阅读(...) 评论()

我要回帖

更多关于 phpcms 分页 的文章

 

随机推荐