vue loadmore组件上拉加载更多功能示例代码
发布时间：2020-12-17 02:52:30 所属栏目：百科 来源：网络整理
导读：最近在做移动端h5页面，所以分页什么的就不能按照传统pc端的分页器的思维去做了，这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多，符合正常使用习惯。 首先简单写一下模板部分的html代码,，很简单清晰的逻辑： 正在加载 没有更多了 然后就是业
|
最近在做移动端h5页面，所以分页什么的就不能按照传统pc端的分页器的思维去做了，这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多，符合正常使用习惯。 首先简单写一下模板部分的html代码,，很简单清晰的逻辑： 然后就是业务部分了 在动手写组件之前，先理清需求： 加载页面 -> 滑到底部 -> 上拉一定距离 -> 加载第二页 -> 继续前面步骤 -> 没有更多 这是一个用户交互逻辑，而我们需要将其映射为代码逻辑： 首屏自动加载第一页 -> 滑动到底部&&按下时候滑动距离Y轴有一定偏移量 -> 请求后端加载第二页 -> 根据返回字段判断是否还有下一页 有了代码逻辑，主干就出来了，加载和判断由事件来控制，而又作为一个vue组件，我们需要配合vue生命周期来挂载事件和销毁事件 如果没有解绑的话，每次你加载组件，就会绑定一次事件… 然后我们需要一些核心事件回调方法来在合适的时间加载数据渲染页面,回想一下，第一我们需要http获取数据的load函数，然后我们需要三个绑定事件的回调函数pointDown(),pointMove(),pointUp(),分别对应用户按下、移动、弹起手指操作： {
// 获取数据后的处理
}).catch((e) => {
// 异常处理
})
},/**
* 鼠标按下事件处理函数
* @param {Object} e - 事件对象
*/
pointerdown(e) {
// 获取按下的位置
this.pageY = e.changedTouches ? e.changedTouches[0].pageY : e.pageY
},/**
* 鼠标移动事件处理函数
* @param {Object} e - 事件对象
*/
pointermove(e) {
const container = this.$container
const pageY = e.changedTouches ? e.changedTouches[0].pageY : e.pageY
const moveY = pageY - this.pageY
// 如果已经向下滚动到页面最底部
if (moveY < 0 && (container.scrollTop + Math.min(
global.innerHeight,container.clientHeight,)) >= container.scrollHeight) {
// 阻止原生的上拉拖动会露出页面底部空白区域的行为（主要针对iOS版微信）
e.preventDefault()
// 如果上拉距离超过50像素，则加载下一页
if (moveY < -50) {
this.pageY = pageY
this.load()
}
}
},/**
* 鼠标松开事件处理函数
*/
pointerup() {
// 这边就是取消拖动状态，需要注意在拖动过程中不要再次触发一些事件回调，否侧乱套
this.dragging = false
},},···
}
基本上主干已经算完工了，一些props传入或者一些逻辑控制细节需要再额外添加，贴出整个组件的源码： -->
以上所述是小编给大家介绍的vue loadmore组件上拉加载更多功能示例代码。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |