1.功能需求

其实在很多的页面开发过程中，有些页面尤其是评论页面，在第一次加载的时候并不会加载很多的相关数据，而是加载一部分，当用户下拉旁边的滚动条时，尤其是滚动条移动到底部的时候，就会出现行的相关内容，这是怎么实现的呢？其实和分页大致一个原理，就相当于目前展示的是第一页的相关内容，当我们滑动到底部的时候就默认去获取第二页的相关内容。其实elementUi中也有这种的组件，但在运用的时候其实会发现并不是很好用那么该怎么实现这一需求场景呢？

2.页面展示

粗糙的页面展示如下，由于没有发送请求，就采取的for循环往数组里面添加相关的内容，如下图一样，且在页面中通常在不只是有这一个页面这里就采取了一个蓝色的盒子来进行相关的站位，来模拟头部的相关内容。大致具体实现就如下面的效果图一样，就滑动到底部是会请求新的相关数据。那么具体实现的代码如下

3.实现代码

其实其中的核心代码如下，大致实现的具体原理如下，我们首先需要获取窗口的大小以及用来装载数据的父盒子的高度，因为根据这两个其实我们就可以获取到浏览器窗口实际能滚动的距离，

但是往往在页面开发过程中，一个页面中不只是有我这一个元素，通常这个功能用于网页底部，因此我们就需要获取这个父盒子距离页面顶部的距离，因此在滑动的过程中这段距离是不算在我们的scrollY中的，因此我们需要减去，最终我们将误差设置在10 (这个误差可以根据自己的喜好进行相关的设定，但不建议太大 ) 内，这样就可以实现不断获取刷新的功能了。且如果还有底部，则需要减去底部元素的宽度。但通常情况下这种都是下面没有元素。即若下面没有元素，去掉bottom.clientHeight 即可。

    getMainBox(){let Main = this.$refs.Mainlet bottom = this.$refs.bottom// console.log(Main.offsetTop);      //父盒子距离浏览器顶部的高度// console.log(window.innerHeight);  //浏览器的高度，即页面窗口的高度// console.log(Main.clientHeight);  //父盒子的高度(加上padding和margin)// console.log(window.scrollY);     //浏览器右边的滚动条滚动距离if(Math.abs(Main.clientHeight - window.innerHeight - (window.scrollY-Main.offsetTop-bottom.clientHeight)) <= 10){console.log('我滑动到底部了');alert('12323132')//这里在运用在获取新的相关数据即可for(let i = 0;i<10;i++){this.listData.push({infoData:'新加载的相关数据'})}}}

4.全部代码

代码采取的vue框架实现

<template><div class="header"></div><div class="Main" ref="Main"><div class="Item" v-for="(item,index) in listData" :key="index">{{ item.infoData }}</div></div><div class="bottom" ref="bottom"></div>
</template><script>
export default {name: 'scrollLoad',data() {return {listData: [{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'},{infoData: '123132'}]}},mounted(){this.scrollWindow()},methods:{scrollWindow(){window.addEventListener('scroll',()=>{this.getMainBox()})},getMainBox(){let Main = this.$refs.Mainlet bottom = this.$refs.bottom    //底部的相关DOM// console.log(Main.offsetTop);      //父盒子距离浏览器顶部的高度// console.log(window.innerHeight);  //浏览器的高度，即页面窗口的高度// console.log(Main.clientHeight);  //父盒子的高度(加上padding和margin)// console.log(window.scrollY);     //浏览器右边的滚动条滚动距离if(Math.abs(Main.clientHeight - window.innerHeight - (window.scrollY-Main.offsetTop-bottom.clientHeight)) <= 10){console.log('我滑动到底部了');alert('12323132')//这里在运用在获取新的相关数据即可for(let i = 0;i<10;i++){this.listData.push({infoData:'新加载的相关数据'})}}}}
}
</script><style lang="less" scoped>
.header{background: blue;height: 200px;margin-bottom: 10px;
}
.Main {border: 1px solid #ccc;.Item {margin-top: 5px;height: 30px;line-height: 30px;background: red;}
}
.bottom{background: green;height: 200px;margin-bottom: 10px;
}
</style>

5.相关总结

虽然这种加载方式可以给用户一种很舒服的体验，但是其实最难的是在页面刷新后的数据展示，是直接返回网站顶部这种用户重新下拉获取，还是保持到当前页中的数据呢？这背后其实也值得让我们进行相关的思考，欢迎大家一起讨论学习，相互进步

Vue中实现特效下拉加载更多数据相关推荐

ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. ...
小程序下拉加载更多数据
1 功能介绍 1.1 简单列表分页功能描述:拖动下拉条,可以加载更多内容 1.1.1 实现步骤 1.1.1.1 配置.json文件 1) 在app.json页面配置&q ...
ant-design-vue select 可搜索下拉加载更多
1.搜索配置 showSearch 属性,支持单选模式可搜索. filterOption 是否根据输入项进行筛选. 当其为一个函数时,会接收 inputValue option 两个参数,当 opt ...
angularjs实现下拉加载更多
angularjs实现下拉加载更多数据, 我是通过指令来实现的,直接上代码 .directive("scroll", ["$window", "$do ...
H5 下拉加载更多(模拟微信聊天记录）
前言前段时间用H5实现一个实时聊天的功能.发现很难实现像微信聊天记录一样下拉加载更多记录.市面上大部分的 Web 项目实现的效果都是上拉加载,下拉刷新.下拉加载更多很少见,下拉在加载数据方面与上拉是 ...
织梦ajax加载文章列表,织梦dedecms首页列表页ajax点击下拉加载更多文章瀑布流效果...
织梦dedecms实现点击下拉加载更多主要用到ajax技术.具体步骤如下: 一.首先找到并打开/plus/list.PHP文件,在里面找到如下代码: require_once(dirname(__FI ...
上拉加载_如何用Vue + Mint UI实现上拉加载更多
引言: 上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结. 一.在项目中使用 mint-ui 需要先安装查看官网 (1)安装:npm ...
html5页面下拉加载更多_使您的产品页面销售更多的5条提示
html5页面下拉加载更多 Getting visitors to your website requires a great deal of work and, for many businesse ...
html下拉自动加载更多,H5页面下拉加载更多(实用版)
近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有. 醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件还可以,但是 ...

Vue中实现特效下拉加载更多数据