<%@ page language="java" contentType="text/htmlcharset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无限翻页效果</title>
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
<script src="css/infinite-scroll/test/debug.js"></script>
<script>
$(document).ready(function (){ //别忘了加这句，除非你没学Jquery
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--成功后自动隐藏
nextSelector: "#navigation a",
itemSelector: ".scroll " ,
animate: true,
maxPage: 3,
})
})
</script>
</head>
你一页设定了显示多少篇文章？还有你有多少个分类呢，每个分类有多少篇文章呢
结合以上的问题
我打个比方
你一共有10篇文章，首页设置了显示5篇文章，刚好首页可以用infinite Scroll加载文章2页
而10篇文章里，分了3个分类，分类a有3篇，分类b有3篇，分类c有4篇，
这样的话点击其中一个分类都不够你设置的一个页面显示5篇文章
所以试试更新多点文章，看看分类页面会不会出现错误
懂我意思吗
译文： https://alligator.io/vuejs/implementing-infinite-scroll/
本文将使用 Random User API (模拟后端返回数据)。该API将自己形容为“像Lorem Ipsum，但是对于人”。它不仅适用于此实现，而且对于模仿未来项目的用户配置文件也非常有用。
在你开始前，用 Vue CLI webpack-simple 项目模板创建一个新的 Vue.js 项目。此例子将分别用 Axios 和 MomentJS 来获取数据和日期格式。
$ vue init webpack-simple infinite-scroll-vuejs
有各种实现无限滚动的 npm 包，你可以使用你的 Vue 应用程序，但其中一些可能是太繁琐了。此文中，我们将不用那些插件或包，仅仅编写一个简单的 JavaScript 函数来实现无限滚动功能（当滚动到浏览器窗口底部时，获取一组新数据）。
在我们开始集成无限滚动之前，让我们在页面加载中获取并设置一些初始数据：
App.vue
注意：
Random User API 一次只会返回一个随机用户数据，为了获得5个用户数据，需要发起五次请求。
如果您在 console 看到了五个用户数据，那就OK了！让我们通过模板中的这些数据进行迭代，然后继续：
App.vue
现在你在此的目的......无限的滚动！ 在组件的方法中，您需要创建一个名为 scroll() 的新函数，并将其加载到 mounted() 生命周期方法中。
这个 scroll() 方法应该有一个简单的条件来计算页面的底部，判断它为true或false，并执行一些 *** 作。我们将利用文档对象的 documentElement.scrollTop ， documentElement.offsetHeight 属性和窗口的 innerHeight 属性来确定是否滚动到底部：
在这种情况下，让我们添加一个GET方法，使用Axios从随机用户API中获取另一个随机用户。
此功能只会在用户滚动到页面底部时发起服务请求，并向人员数组添加一个新的随机“用户”。此时，您应该可以无限滚动...并每次看到新的“用户”。
无限滚动听起来吓人，但如所证明的那样，它非常简单。每次滚动到页面的底部时，我们都会使用 Axios 获取新数据，然后将这些数据推送到数组中。要延迟加载图像，只需将图像源推送到数据数组，在模板中遍历它，然后将 <img：src ="">绑定到数组。
ps： 此文核心就在【判断是否滚动到页面底部的逻辑上】，在此提供一个兼容性更好的写法，参考此文 滚动到底部加载更多 。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）