JavaScript 滚动加载数据 |
您所在的位置：网站首页 › javascript滚动文字 › JavaScript 滚动加载数据 |
|
在做网站时，由于数据不能一下子全部加载出来，因此在滚动条滚动到某一个位置时，就向后端发送请求，请求新的数据。这就是通过滚动加载数据。 1. 滚动加载在做滚动加载的时候有两点需要注意的地方： 设定滚动条滚动到某个位置，然后发起请求 如何保证加载数据的时候，不会出现重复加载的问题 1） 设定滚动条滚动到某个位置，然后发起请求由于业务需求的不同，因此会存在滚动方向的不同，一般分为 向上滚动 和 向下滚动 向上滚动 - 滚动到顶部时加载 应用场景：聊天室 默认显示最新的消息，设定滚动条初始位置在最底下，然后向上滚动到顶部，就加载旧的消息，即自下往上的形式。（滚动到顶部即 scrollTop === 0 的时候） var changeScrollSlide = function() { var el = document.querySelector('.content') // 如果滚动到最顶端，则向后端发送请求，获取旧的消息 if (el.scrollTop === 0) { console.log('向后端发送请求'); } } //启动滚动监听，监听滚动条的滚动 window.addEventListener('scroll', changeScrollSlide, true) /* 如果设置的是内滚动，然后设置了 body 的 css 为： body {overflow: hidden}，那么直接使用 window.addEventListener('scroll', changeScrollSlide)，是无法监听到滚动事件的 需要为 addEventListener 添加第三个参数，使用 捕获 的方式获取 */ 向下滚动 - 滚动到底部时加载 应用场景：商城商品的展示 默认滚动条在最顶上，然后向下滚动，滚动到底部就加载更多的数据 var changeScrollSlide = function() { var el = document.querySelector('.content') // 如果滚动到最底部，则向后端发送请求，获取更多的信息 if (el.scrollHeight - el.clientHeight - el.scrollTop === 0) { console.log('向后端发送请求'); } } // 启动滚动监听，监听滚动条的滚动 window.addEventListener('scroll', changeScrollSlide, true) /* 如果设置的是内滚动，然后设置了 body 的 css 为： body {overflow: hidden}，那么直接使用 window.addEventListener('scroll', changeScrollSlide)，是无法监听到滚动事件的 需要为 addEventListener 添加第三个参数，使用 捕获 的方式获取 */ 2） 如何保证加载数据的时候，不会出现重复加载的问题创建一个请求标记，用来记录是否正在请求，在发出请求后，即使再次滚动到需要发送请求的位置，也不进行新的请求 请求中则设置 is_requesting = true; 请求成功则将请求标记设为可以重新请求 is_requesting = false; 请求失败则将 page 和 is_requesting 设置为原来的值 page = page - 1; is_requesting = false; // 标记，避免重复请求和重复加载信息 var page = 1 var is_requesting = false var changeScrollSlide = function() { // 如果滚动到最顶端且没有正在请求中，则向后端发送请求，获取旧的消息 if ($('.content').scrollTop() === 0 && is_requesting === false) { page++ is_requesting = true // 向后端发送请求 $.ajax({ url: '/api/test_url', type: 'GET', data: { page: page, perpage: 10, }, success: function(data) { // TODO：将获取的数据渲染到页面 is_requesting = false }, error: function() { page-- is_requesting = false } }) } } window.addEventListener('scroll', changeScrollSlide, true) /* 如果设置的是内滚动，然后设置了 body 的 css 为： body {overflow: hidden}，那么直接使用 window.addEventListener('scroll', changeScrollSlide)，是无法监听到滚动事件的 需要为 addEventListener 添加第三个参数，使用 捕获 的方式获取 */ 2.示例代码下载向上滚动加载 向下滚动加载 设置请求标记避免重复请求 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |