零基础学做网站培训介绍

当前位置:

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

手机网站越来越多,通常在手机网站制作时,如果页面很多的情况下,我们会使用分页功能,通过分页的方式来显示不同的内容。

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

手机网站除了使用这样的普通分页之外,还可以使用制作手机网站下拉加载的方式来加载内容。

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

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

第一步:替换普通的循环标签

我们平时去显示文章列表时,使用以下的普通循环标签:


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

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

现在把它替换成以下的循环标签;


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

<?php endwhile; wp_reset_query();
?>

<?php
$next_page = get_next_posts_link('加载更多');
if($next_page) echo '<div class="article-paging mobantu">'.$next_page.'</div>';
?>

第二步:导入JQUERY文件。

将以下的代码放在自己头部模板的</head>上面;

第三步:放上JS加载代码。

将以下的JS代码放在</body> 标签上方,这样点击实现加载更多,你可以根据自己需要改成下拉自动加载。


<script>
$('.article-paging > a').on('click',function(){
var next_url = $(this).attr("href");
var next_text = $(this).text();
if(next_text == '加载更多'){
$(this).text('加载中...');
$.ajax({
type: 'get',
url: next_url + '#article-list',
success: function(data){
result = $(data).find("#article-list .article-item");
next_link = $(data).find(".article-paging > a").attr("href");
//$(this).attr("href", next_url);
if (next_link != undefined){
$('.article-paging > a').attr("href", next_link);
$('.article-paging > a').text('加载更多');
}else{
$(".article-paging").remove();
}

$(function(){
$("#article-list").append(result.fadeIn(300));
$('.thumb').lazyload({
data_attribute: 'src',
placeholder: _BGJ.uri + '/static/img/thumbnail.png',
threshold: 400
});
});

$(function() {
if (next_url.indexOf("page") < 1) {
$("#article-list").html('');
}
$("#article-list").append(result.fadeIn(200));
});
}
});
}
return false;
});
</script>

通过以下的几步就可以制作出手机网站的下拉加载翻页的功能了。

相关阅读:

DEDECMS怎么仿手机网站,织梦手机网站仿站教程

怎么PC网站自动缩小手机全屏宽度显示

怎么制作手机网站,响应式手机网站制作

发表评论

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

相关教程

  • 什么是自适应手机网站 视频教程 (194690 次浏览)
    以下为学做网站论坛关于“什么是自适应手机网站”讲解视频教程。
  • 老师你好,我前几天一直在学习手机站课程,对于课程中的案例网站特别喜欢,自己就跟着课程一步步做了一遍。也做了课程笔记,感觉学到了很多知识。
  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽
  • 对于我们在制作图片网站时,一个版面上有大量的图片。用户进入我们网站后,如果图片全部同时加载的话,会严重拖慢网页打开速度,影响用户浏览体验。
  • 在学做网站论坛之前的建站教程中,介绍过什么是图片延迟加载,又叫图片懒加载。对于网站页面上有大量图片,图片延迟加载特别有用,可以加速网页打开速
  • 我们通常在做网站时,如果一个栏目下的内容过多,我们会使用分页功能来将内容进行分页展示。如下图:今天我们介绍一下除了分页之外,我们展示
  • 手机网站越来越多,通常在手机网站制作时,如果页面很多的情况下,我们会使用分页功能,通过分页的方式来显示不同的内容。手机网站除了使用这