网页商城静态页面_如何在静态网页中实现无限页面滚动效果

最新推荐文章于 2024-09-11 11:07:15 发布

cune1359

最新推荐文章于 2024-09-11 11:07:15 发布

阅读量566

点赞数

文章标签： python js javascript java web ViewUI

Twitter和Tumblr等流行的社交网络的用户必须熟悉无限滚动。此效果是分页链接的绝佳动态替代，其中用户无需等待页面刷新。所有外部内容都会动态加载并附加到您的内容包装器中。

但是，这种影响的问题在于安装的难度。 WordPress用户可以选择插件来自动将此效果插入存档和类别页面 。但是，使用基本HTML5 / CSS3的 Web开发人员被迫使用其他一些解决方案。

在本文中，我想展示我最喜欢的两个插件，这些插件可用于无限滚动到静态Web内容。 这两个示例都很有用，因为它们如何处理数据请求。一些用户可能对加载静态HTML感兴趣，而另一些用户则需要包含后端语言，例如PHP或Ruby。在这两个jQuery插件之间，我们可以找到适合任何Web项目的有用解决方案。

无限滚动

我想从最流行的jQuery插件无限滚动开始。这是由Paul Irish创建的，也可以在WordPress插件存储库中找到。大多数用户对该插件给予了很高的评价，新发行的WP 3.5.1似乎仍然支持该插件。

但是，编写自己的自定义加载器要困难一些。我们需要使用一些jQuery方法调用并在布局内传递相关数据。任何无限加载插件都将在DOM上需要一系列重要元素。这些包括上一个/下一个页面锚链接以及应该包含新数据的内容包装器。

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Infinite Scroll Testing</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="https://www.hongkiat.com/blog/favicon.ico">
  <link rel="icon" href="https://www.hongkiat.com/blog/favicon.ico">
  <link type="text/css" rel="stylesheet" media="all" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.infinitescroll.js"></script>
  <script type="text/javascript" src="manual-trigger.js"></script>
</head>

我的演示基于可在Github存储库中找到的原始演示。您应该下载该脚本或我的脚本的副本，因为我们需要一系列文档来使其正常工作。

显然，我包括了最新版本的jQuery，以及无限滚动插件和另一个名为manual-trigger.js的JS文件。我在Stack Overflow上找到了一篇很棒的文章，其中详细介绍了为什么此JS脚本有助于效果。

加载外部HTML页面

我的样式表也是从演示中复制的原始样式表，但是我们真的不必担心CSS样式。即使我们删除了所有填充和字体样式，分页文档仍将加载。但是您可以看到，除了我们现在要研究的JS函数之外，所有内容都已合并到标头中。

内部页面主体保存在ID为#content的div内，我们需要在jQuery中进行引用。导航链接还具有ID #next ，这对于正确加载页面至关重要。我已经复制了整个脚本块元素，因此我们可以看到如何在页面上调用此方法。

<script type="text/javascript">
$(document).ready(function(){
	$('#content').infinitescroll({
		navSelector: "#next:last",
		nextSelector: "#next:last",
		itemSelector: "#content",
		debug: false,
		dataType: 'html',
    maxPage: 4,
		path: function(index) {
			return "index" + index + ".html";
		}
		// appendCallback	: false, // USE FOR PREPENDING
    }, function(newElements, data, url){
      // used for prepending data
    	// $(newElements).css('background-color','#ffef00');
    	// $(this).prepend(newElements);
    });
});
</script>

navSelector和nextSelector之间的区别很细微，但绝对重要。您的导航选择器可以是包含整个导航的元素。这可能是一个包含多个页面的div，或者甚至是带有上一页/下一页的两个按钮。但是，下一个选择器仅针对您指向下一页的特定锚链接。

“路径”值非常重要，因为这标记了我们需要请求的每个页面。该参数可以接受字符串值或返回到每个新页面的自定义函数 。对于我的演示，我们使用一些示例代码来包括三个外部索引页。可以将index变量传递到函数中，并且您可以执行逻辑以确定接下来需要加载哪个页面。

如果您想清理前端，则大部分JavaScript代码都可以放置在外部文档中。我会说， 如果您不熟悉jQuery ，“ 无限滚动”确实会有潜在的压力学习曲线。 但是，当所有文件都按顺序排列时，它可以很好地工作。最大的缺点是您只能将HTML，JSON或XML页面加载到文档中。 对于后端解决方案，我们不太可能获得对动态PHP，ASP或Python的支持。

jQuery ScrollPagination

我已经将一些示例代码移植到我自己的布局中，并通过PHP构建了一个很棒的演示内容。但是首先，您应该从Github存储库中获取一份副本，其中包括示例文件和简短的演示。解压缩内容后，我们只需要一个名为scrollpagination.js的文件即可使效果生效。另外，我们需要包括jQuery的最新版本，但这应该是假定的。

<div id="w">
 <h2>Infinite Loading Demo</h2>
 
 <div id="content">
   <p>This is the main content element. All the infinite scroll content will load into this div.</p>
 </div>
 
 <div class="loading" id="loading">Loading please wait...</div>
 <div class="loading" id="nomoreresults">Sorry, no more results to display.</div>
</div>

您会注意到，此示例HTML代码要小得多。默认情况下，页面底部的两个div元素应隐藏。这些仅在激活插件以加载新内容或到达内容结尾时显示 。 ScrollPagination实际上具有一个参数，用于限制我们要附加到页面上的新HTML DOM元素的数量。

JS函数参数

使此函数正常工作的最重要部分是将正确的数据传递到正确的变量中。与以前的Infinite Scroll插件相比，我们正在查看更大的数据块。这些参数中的某些参数是在要加载新对象时以及在我们用尽所有对象列表时调用元素的函数。

var page = 0;
$(function(){  
	$('#content').scrollPagination({
		'contentPage': 'ajax.php', // the url you are fetching the results
		'contentData': { 'page': page }, 
		'scrollTarget': $(window),
		'heightOffset': 10,
		'beforeLoad': function(){ 
		  // before load function, you can display a preloader div
			$('#loading').fadeIn();	
		},
		'afterLoad': function(elementsLoaded){
			 $('#loading').fadeOut();
			 var i = 0;
			 $(elementsLoaded).fadeInWithDelay();
			 page++;
			 if ($('#content').children().size() > 140){ 
			   // if more than 140 results already loaded, then stop pagination
			 	$('#nomoreresults').fadeIn();
				$('#content').stopScrollPagination();
			 }
		}
	});

因此，参数contentPage将选择所需的内容，并将其通过Ajax传递到页面中。这意味着我们可以加载动态内容，并且仍由服务器解析它。在此示例中，我从YouTube提取XML数据并遍历PHP中的结果以返回视频和缩略图列表。

如果需要将更多数据传递到每个ajax请求中，则contentData参数也很好用。可以将其留空，插件仍将正常运行。但是在我的示例中，我们可以为每个加载调用传入分页值，并每次将页面增加+1。不幸的是，我还没有找到将这个值添加到后端PHP代码中的方法。但是它在JavaScript函数中可能同样有用。

// code for fade in element by element
	$.fn.fadeInWithDelay = function(){
		var delay = 0;
		return this.each(function(){
			$(this).delay(delay).animate({opacity:1}, 175);
			delay += 100;
		});
	};
		   
});

在ScrollPagination方法的最底部，可以看到另一段自定义代码。这不需要用户端的任何编辑，我们只需要确保该功能正常工作即可，并且将与脚本代码一起包含在内。 fadeInWithDelay会将相同的jquery .animate（）方法推送到我们需要的任何页面元素上。

这比将相同的动画代码复制到插件中的每个部分要容易得多。尽管诚然，如果将这些代码存储在单独的JS文件中（可能的话），这看起来会更好。但是，ScrollPagination最可赎回的质量必须是处理后端语言的能力。

查看我们的现场演示，或下载项目源代码的副本以在您自己的服务器上运行。对于没有CMS支持的动态网站，这是最佳的无限页面滚动解决方案。