最近接了一个需求,是微信浏览器监听用户上拉操作,从而实现页面滚动加载的效果。其实网上已经有很多类似成熟的栗子了,但是由于自己开发经验有限,所以第一次看到这个需求的时候也是一百脸茫然,当时不知道网上有这么成熟的框架以及案例。
随后网上一顿猛操作,看了一下确实不难。首先我们使用的是vue开发组件,是不是觉得我们这个是前后端分离的项目了,然而并没有,虽然用到了vue,完全是因为,这玩意儿好用罢了,springboot+thymeleaf模板引擎+Vue.js+elementUI等等等,总之技术栈用的很凌乱,接下来讲一下用户上拉加载更多内容的这个思路吧:
- 首先需要考虑如何判断用户是在上拉、操作屏幕 ------》 页面监听
- 如何判断用户已经拉到了页面底部 -----》 距离顶部 + 当前高度 》= 文档总高度
- 拉到底部之后,如何将请求的数据重新追加到原有数据的基础上
带着以上三个问题,来解决这个需求。
首先,我们页面需要用一个DIV来存放内容,以后每次请求的数据都重新叠加到当前div内部,同时监听用户下来的操作,也是监听当前div.
<div class="view">
......数据渲染.......
</div>
<div class="hint">上拉加载,获取更多内容</div>
下面这个div仅用于提示的作用,证明用户已经下拉到了底部。
其次,我们使用的是vue.js来写前端监听器以及相应的方法(用什么写这倒无所谓,毕竟vue也是根据js衍生出来更高效简介的脚本语言)
注册监听器:
mounted() {
// window.addEventListener('scroll', this.loading, true);
window.addEventListener('touchmove', this.loading, true);
},
destroyed() {
window.removeEventListener("touchmove", this.loading, true);
},
touchmove 和 scroll 实现的动作其实差不多,都是js内部实现的方法,任选其一即可,对于单页面应用,最好在注册了监听器页面的地方,在离开页面的时候顺手destroyed,避免监听到其它页面。
methods: {
/**
* 监听页面滚动上拉刷新
*/
loading() {
if (document.body.scrollTop + document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.clientHeight) {
if (!document.querySelector('.loading')) {
let load = document.createElement('div');/*创建加载子元素*/
load.className = 'loading';
document.querySelector('.view').appendChild(load);/*添加加载子元素,,创建的div的class名,这里必须一致*/
setTimeout(() => {
document.querySelector('.view').removeChild(load);/*移除加载块*/
this.pageCount++; //页码计数器,默认为1
this.getSceneRecordingList(); //调用自己的方法加载数据,将页码计数器传到后端,实现分页获取
}, 300);/*刷新追加新的内容*/
}
}
},
''''''''
}
该方法就是实现监听器的方法,使用setTimeout定时器延时0.3秒追加内容。
第一个if语句就是判断是否下来到了底部。
这样做的目的就是为了每次滑动到底部将 页码计数器传给后端
当然后端就是按照以往的分页方法(limit),或者分页插件PageHelper,都可以。
当然还有更加简洁的,至于H5下来分页、滚动分页这些,早就有了相应的框架支持,例如JQuery WEUI
http://www.jqweui.cn/extends#pull-to-refresh