前言

前段时间用H5实现一个实时聊天的功能。发现很难实现像微信聊天记录一样下拉加载更多记录。市面上大部分的 Web 项目实现的效果都是上拉加载，下拉刷新。下拉加载更多很少见，下拉在加载数据方面与上拉是一样的，但是如何做到像微信聊天记录一样，下拉之后还是保留在原有的位置就需要思考一下了。

下拉与上拉区别

下拉与上拉在加载数据上面基本一致，但是因为方向不同，所以也存在以下不同之处。

上拉是将数据加载到原数据后面，所以用的是数组拼接 concat 方法。而下拉是将数据添加到原数据前面，所以需要使用 unshift 方法。
上拉是滑动到底部时触发，下拉是滑动到顶部时触发，因此判断 scrollTop 为 0 时触发，触发完之后需要将 scrollTop 重置一下。
为了模拟微信聊天记录加载方式，下拉之后需要滑动到原先的位置。通过 scrollTo 方法实现，scrollTo(x,y) 接收两个参数，x 为页面 X 轴，y 为页面 Y 轴，这里显然是需要修改 Y 轴的距离。x 为 0 即可。而 y 值就是第一次的 scrollHeight 滑动高度，因为每次加载的数据都是一样的，所以使用 scrollHeight 作为上次滑动位置。
代码中有很多定时器的使用，主要是为了防止用户频繁滑动（节流）以及在列表渲染之后再去获取 DOM 属性。

实现思路

封装一个加载数据的方法，首先加载初始数据；
获取列表的 scrollHeight，将记录定位到最底部，也就是最新的记录在可视区域的最下面。
监听滑动，当滑动到最顶部时，加载一屏数据，同时滑动定位到上次初始的位置。

完整代码如下

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container {width: 300px;height: 300px;overflow: auto;border: 1px solid;margin: 100px auto;}.item {height: 29px;line-height: 30px;text-align: center;border-bottom: 1px solid #aaa;}</style>
</head>
<body>
<div id="app"><div class="container" ref="container"><div class="item">{{loadText+"第"+pageNum+"页"}}</div><div v-for="(item, index) in list" :key="index" class="item">{{item}}</div></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>new Vue({el: '#app',data: {scrollHeight: 0,list: [],loadText:"加载中...",pageSize:20,pageNum:1,},mounted() {this.initData();const container = this.$refs.container;//这里的定时是为了列表首次渲染后获取scrollHeight并滑动到底部。setTimeout(() => {this.scrollHeight = container.scrollHeight;container.scrollTo(0, this.scrollHeight);}, 10);container.addEventListener('scroll', (e) => {//这里的2秒钟定时是为了避免滑动频繁，节流setTimeout(() => {if(this.list.length>=90){this.loadText = "加载完成";return;}//滑到顶部时触发下次数据加载if (e.target.scrollTop == 0) {//将scrollTop置为10以便下次滑到顶部e.target.scrollTop = 10;//加载数据this.initData();//这里的定时是为了在列表渲染之后才使用scrollTo。setTimeout(() => {e.target.scrollTo(0, this.scrollHeight - 30);//-30是为了露出最新加载的一行数据}, 100);}}, 2000);});},methods:{//初始数据initData() {for (var i = 20; i > 0; i--) {this.list.unshift(i)}this.pageNum++;}}})
</script>
</body>
</html>

H5 下拉加载更多(模拟微信聊天记录）相关推荐

IM 聊天页面下拉加载更多--类似微信顺滑展示
背景领导在会议上说我们的 IM 聊天页面的用户体验不太好,尤其是下拉加载更多会跳动,让我优化一下.之前还确实没有注意到这一点,现场拿出手机和微信做对比,不比不知道,一比还真是发现了问题.微信 ...
html下拉自动加载更多,H5页面下拉加载更多(实用版)
近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有. 醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件还可以,但是 ...
ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. ...
下拉加载更多--判断页面距离
2019独角兽企业重金招聘Python工程师标准>>> /* *下拉加载更多使用 *底部小于50返回false--加载,否则不加载 * */ function lowEnough() ...
织梦ajax加载文章列表,织梦dedecms首页列表页ajax点击下拉加载更多文章瀑布流效果...
织梦dedecms实现点击下拉加载更多主要用到ajax技术.具体步骤如下: 一.首先找到并打开/plus/list.PHP文件,在里面找到如下代码: require_once(dirname(__FI ...
移动端下拉加载更多DEMO(纯js实现)
首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判断滚动条滚到底呢? 当滚动条的高度加上滚动条到div顶部的高度等于div的可滚动高度时,说明滚 ...
html5页面下拉加载更多_使您的产品页面销售更多的5条提示
html5页面下拉加载更多 Getting visitors to your website requires a great deal of work and, for many businesse ...
ant-design-vue select 可搜索下拉加载更多
1.搜索配置 showSearch 属性,支持单选模式可搜索. filterOption 是否根据输入项进行筛选. 当其为一个函数时,会接收 inputValue option 两个参数,当 opt ...
angularjs实现下拉加载更多
angularjs实现下拉加载更多数据, 我是通过指令来实现的,直接上代码 .directive("scroll", ["$window", "$do ...

H5 下拉加载更多(模拟微信聊天记录）

前言

下拉与上拉区别

实现思路

完整代码如下

H5 下拉加载更多(模拟微信聊天记录）相关推荐

最新文章

热门文章