- N +

zblogphp无限下拉教程

原标题:zblogphp无限下拉教程

摘要:

最近一直在忙,但是不知道在忙啥,是的,这就是我最近的生活,处于水深火热之中。。。生命中不断有人离开和进入,于是看见的看不见了,记住的遗忘了,生命中不断的有得到和失落,于是看不见...

最近一直在忙,但是不知道在忙啥,是的,这就是我最近的生活,处于水深火热之中。。。

忙忙忙.png

生命中不断有人离开和进入,于是看见的看不见了,记住的遗忘了,生命中不断的有得到和失落,于是看不见的看见了,遗忘的记住了。    炎炎夏季带来了细雨,带来了暖风,同样带来了夏的艳丽,那旋蓝的花色 让我们的心情也随之美丽 也许生活的忙绿,常常让无暇去欣赏优美的风景,然而那风、那雨、那花、那草、那蓝天、那白云、不也一样是一种风景吗, 我的朋友们暂时放下工作,用几秒钟的时间去感受下这细微而平凡的美吧,生活愿本是这么简单、这么美好, 感谢所有支持我的朋友们----现实的和网络的、熟悉的和陌生的,谢谢你们的陪伴和支持、同时也祝愿你们,珍惜生命,珍惜眼前人。

以上文字摘自网络《雨的印记》女生独白版,很喜欢这个调调,不过,言归正传。。。

zblogphp无限下拉似乎在某些主题真的很实用,所以就把这个教程写下来了,之前忘了在那看到的啦,昨天制作主题的时候感觉这个很设置很设置这个主题就用上了:教程也很简单,一段JavaScript就解决了。

(function(e){"use strict";Date.now=Date.now||function(){return+(new Date)},e.ias=function(t){function u(){var t;i.onChangePage(function(e,t,r){s&&s.setPage(e,r),n.onPageChange.call(this,e,r,t)});if(n.triggerPageThreshold>0)a();else if(e(n.next).attr("href")){var u=r.getCurrentScrollOffset(n.scrollContainer);E(function(){p(u)})}return s&&s.havePage()&&(l(),t=s.getPage(),r.forceScrollTop(function(){var n;t>1?(v(t),n=h(!0),e("html, body").scrollTop(n)):a()})),o}function a(){c(),n.scrollContainer.scroll(f)}function f(){var e,t;e=r.getCurrentScrollOffset(n.scrollContainer),t=h(),e>=t&&(m()>=n.triggerPageThreshold?(l(),E(function(){p(e)})):p(e))}function l(){n.scrollContainer.unbind("scroll",f)}function c(){e(n.pagination).hide()}function h(t){var r,i;return r=e(n.container).find(n.item).last(),r.size()===0?0:(i=r.offset().top+r.height(),t||(i+=n.thresholdMargin),i)}function p(t,r){var s;s=e(n.next).attr("href");if(!s)return n.noneleft&&e(n.container).find(n.item).last().after(n.noneleft),l();if(n.beforePageChange&&e.isFunction(n.beforePageChange)&&n.beforePageChange(t,s)===!1)return;i.pushPages(t,s),l(),y(),d(s,function(t,i){var o=n.onLoadItems.call(this,i),u;o!==!1&&(e(i).hide(),u=e(n.container).find(n.item).last(),u.after(i),e(i).fadeIn()),s=e(n.next,t).attr("href"),e(n.pagination).replaceWith(e(n.pagination,t)),b(),c(),s?a():l(),n.onRenderComplete.call(this,i),r&&r.call(this)})}function d(t,r,i){var s=[],o,u=Date.now(),a,f;i=i||n.loaderDelay,e.get(t,null,function(t){o=e(n.container,t).eq(0),0===o.length&&(o=e(t).filter(n.container).eq(0)),o&&o.find(n.item).each(function(){s.push(this)}),r&&(f=this,a=Date.now()-u,a<i?setTimeout(function(){r.call(f,t,s)},i-a):r.call(f,t,s))},"html")}function v(t){var n=h(!0);n>0&&p(n,function(){l(),i.getCurPageNum(n)+1<t?(v(t),e("html,body").animate({scrollTop:n},400,"swing")):(e("html,body").animate({scrollTop:n},1e3,"swing"),a())})}function m(){var e=r.getCurrentScrollOffset(n.scrollContainer);return i.getCurPageNum(e)}function g(){var t=e(".ias_loader");return t.size()===0&&(t=e('<div class="ias_loader">'+n.loader+"</div>"),t.hide()),t}function y(){var t=g(),r;n.customLoaderProc!==!1?n.customLoaderProc(t):(r=e(n.container).find(n.item).last(),r.after(t),t.fadeIn())}function b(){var e=g();e.remove()}function w(t){var r=e(".ias_trigger");return r.size()===0&&(r=e('<div class="ias_trigger"><a href="#">'+n.trigger+"</a></div>"),r.hide()),e("a",r).unbind("click").bind("click",function(){return S(),t.call(),!1}),r}function E(t){var r=w(t),i;n.customTriggerProc!==!1?n.customTriggerProc(r):(i=e(n.container).find(n.item).last(),i.after(r),r.fadeIn())}function S(){var e=w();e.remove()}var n=e.extend({},e.ias.defaults,t),r=new e.ias.util,i=new e.ias.paging(n.scrollContainer),s=n.history?new e.ias.history:!1,o=this;u()},e.ias.defaults={container:"#container",scrollContainer:e(window),item:".item",pagination:"#pagination",next:".next",noneleft:!1,loader:'<img src="images/loader.gif"/>',loaderDelay:600,triggerPageThreshold:3,trigger:"Load more items",thresholdMargin:0,history:!0,onPageChange:function(){},beforePageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){},customLoaderProc:!1,customTriggerProc:!1},e.ias.util=function(){function i(){e(window).load(function(){t=!0})}var t=!1,n=!1,r=this;i(),this.forceScrollTop=function(i){e("html,body").scrollTop(0),n||(t?(i.call(),n=!0):setTimeout(function(){r.forceScrollTop(i)},1))},this.getCurrentScrollOffset=function(e){var t,n;return e.get(0)===window?t=e.scrollTop():t=e.offset().top,n=e.height(),t+n}},e.ias.paging=function(){function s(){e(window).scroll(o)}function o(){var t,s,o,f,l;t=i.getCurrentScrollOffset(e(window)),s=u(t),o=a(t),r!==s&&(f=o[0],l=o[1],n.call({},s,f,l)),r=s}function u(e){for(var n=t.length-1;n>0;n--)if(e>t[n][0])return n+1;return 1}function a(e){for(var n=t.length-1;n>=0;n--)if(e>t[n][0])return t[n];return null}var t=[[0,document.location.toString()]],n=function(){},r=1,i=new e.ias.util;s(),this.getCurPageNum=function(t){return t=t||i.getCurrentScrollOffset(e(window)),u(t)},this.onChangePage=function(e){n=e},this.pushPages=function(e,n){t.push([e,n])}}})(jQuery);$.ias({thresholdMargin:-100,triggerPageThreshold:2,history:false,container:'.reco-list',item:'.post-item',pagination:'.pagination',next:'.next-page a',loader:'<div class="pagination-loading"><i class="fa fa-spinner"></i> 数据载入中</div>',trigger:'<div class="load-tip" id="next">点击加载更多...</div>',onPageChange:function(pageNum,pageUrl,scrollOffset){window._gaq&&window._gaq.push(['_trackPageview',jQuery('<a/>').attr('href',pageUrl)[0].pathname.replace(/^[^\/]/,'/')])}});

带入如上,zblogphp我们只需要修改两处即可:

container: '.reco-list',

item: '.post-item',

将.reco-list替换成你列表<ul class="">框架名

将item替换成你的<li class="">名字即可。这么可能有些抽象,截图看下:

zblogphp无限下拉教程.jpg

这回很清晰了吧,因为每个主题的div命名不是统一的,所以需要修改下。

css如下:

/*无限下拉列表*/
.reco-list .ias_trigger{clear:both;text-align:center;display:block;height:76px;line-height:76px;cursor:pointer;-webkit-transition: all .5s ease 0s;-moz-transition: all .5s ease 0s;-o-transition: all .5s ease 0s;width:980px;border-radius:6px;background:#fff;margin-bottom: 20px;position: relative;}
.reco-list .load-tip{font-size:16px;color:#000;}
.load-tip a{color:#39442e;text-decoration:none;outline:0}
#next{clear:both}
.reco-list .ias_loader{width: 980px;border-radius: 6px;background: #fff;border: 1px solid #dedede;margin-bottom: 20px;padding: 20px 0px;line-height: 24px;position: relative;clear: both;}
.pagination-loading {text-align: center;font-size: 14px;}

这个可以按照自己喜好去修改,哦对了,还有一处需要临时修改,因为在获取下一页的情况下,会出现网页加载中,这里css可能显示的不那么友好,需要重新修改css,但是这个过度的时间太快,这个需要把:

loaderDelay:600, 这里的600是指过度的毫秒,需要修改加载中样式的时候需要将此处设置大些,比如6000000,这样就可以了。

最后找到模板首页,右键编辑。如图

zblogphp无限下拉教程2.jpg

<div class="pagination">
	<div class="next-page"><a href="{$pagebar.nextbutton}" ></a></div>
</div>

把上面的代码加入进去就可以了,一切准备就好,后台清空缓存,刷新,无限下拉首秀成功。

哦 no,又忘了一件事,最近这记性是怎么了呢。。。

默认的情况下,只加载两次,就是说无限下拉,只出现两次,还需要的话就得点击加载更多才行,所以还得修改一处:

triggerPageThreshold: 2,

对的,就是这个,2 就是加载两次。按照你的习惯修改就好了。

终于完成了,我去吃点核桃。。。

有好的文章希望李洋个人博客帮助分享推广,猛戳这里我要投稿

返回列表
上一篇:
下一篇:
评论列表 (已有5条评论,共2666人参与)参与讨论
网友昵称:捷闪站长网
捷闪站长网游客2年前 (2016-08-15)回复
支持博主
网友昵称:卢松松博客
卢松松博客游客2年前 (2016-08-13)回复
从百度点进来的,支持一下,希望站长您多出一些好文章。
网友昵称:安卓版一键转发
安卓版一键转发游客2年前 (2016-08-13)回复
从百度点进来的,支持一下,希望站长您多出一些好文章。
网友昵称:威客兼职
威客兼职游客2年前 (2016-08-12)回复
话说web前端是不是和UI设计属于一个环节啊?

发表评论中国互联网举报中心

快捷回复: