学做网站培训课程介绍

当前位置:

如何制作手机网站下拉触底无限加载更多翻页

手机网站越来越多,通常在手机网站制作时,如果页面很多的情况下,我们会使用分页功能,通过分页的方式来显示不同的内容。手机网站除了使用这样的普通分页之外,还可以使用制作手机网站下拉加载的方式来加载内容。

手机网站制作:如何制作手机网站下拉加载

下面介绍一下手机网站制作过程中下拉加载翻页功能的方法。下面以wordpress网站为例介绍一下手机网站制作下拉加载翻页功能步骤。

第一步:将文章列表循环代码使用以下的循环代码;如果本身就是这种循环代码,就不用替换;(这个循环适用于首页和分类页)


<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<?php endwhile;?>
<?php endif; ?>

如果要在某个PAGE单页中加载指定分类的文章列表,需要用以下的循环代码:


<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'caller_get_posts' => 1,
'paged' => $paged,
'cat' => 'ID号',
);
query_posts($args);
while ( have_posts() ) : the_post();?>

<?php endwhile; wp_reset_query(); ?>

第二步:在文章列表所在的父Div标签,添加一个class名为index001;

第三步:在循环中的底层模板加一个class名为excerpt-sticky;

第四步:在循环代码结束的下方,放在“加载更多”的按钮代码;


<div class="next-page" style="text-align:center;padding:10px;"> <?php
$next_page = get_next_posts_link('加载更多');
if($next_page) echo $next_page;
?>
</div>

第五步:

第五步:下载JQUERY下拉无限加载更多文章文件hovermore.js;上传到自己使用的模板文件夹下的JS文件夹里;

第六步:在整个页面代码最下方,放上以下的JS代码,引入hovermore.js来获取下一页的文章列表,这样点击按钮,就可以自动加载下一页的文章列表了,并且是无限加载。


<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/hovermore.js"></script>

这样就可以在自己做网站时,制作出这样的下拉无限加载翻页功能了。

类似功能:WordPress网站实现点击加载下一页文章列表。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • 什么是手机域名手机域名又叫Mobi域名。Mobi是被ICANN批准,并致力于将internet内容传送到移动装置,例如智能电话,PDA,手机等的专属域名
  • 随着智能手机的普遍使用,移动互联网用户的数量随之猛增。当我们关注PC电脑网站制作的时候,一定不要忘了制作一个手机网站。这样我们的网站用户就可以
  • 网站制作流程是什么 视频教程 (1270965 次浏览)
    相信很多朋友第一次接触到网络,接触到建站,会被域名、空间、解析、建站程序等各种问题困扰,甚至都不清楚网站制作流程,也不知该如何下手开始做自己
  • 以下是我们学做网站论坛建站培训课程的所有内容:【只需支付680元的培训费用,就可以学习以下所有课程。】零基础网站制作培训报名地址:https://w
  • 手机网站越来越多,通常在手机网站制作时,如果页面很多的情况下,我们会使用分页功能,通过分页的方式来显示不同的内容。手机网站除了使用这样的普通
  • 对于我们在制作图片网站时,一个版面上有大量的图片。用户进入我们网站后,如果图片全部同时加载的话,会严重拖慢网页打开速度,影响用户浏览体验。
  • 我们通常在做网站时,如果一个栏目下的内容过多,我们会使用分页功能来将内容进行分页展示。如下图:今天我们介绍一下除了分页之外,我们展示