vue瀑布流组件实现上拉加载更多
最近在做移动端h5页面,所以分页什么的就不能按照传统pc端的分页器的思维去做了,这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多,符合正常使用习惯。
首先简单写一下模板部分的html代码,,很简单清晰的逻辑:
最近在做移动端h5页面,所以分页什么的就不能按照传统pc端的分页器的思维去做了,这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多,符合正常使用习惯。
首先简单写一下模板部分的html代码,,很简单清晰的逻辑:
然后就是业务部分了
在动手写组件之前,先理清需求:
加载页面->滑到底部->上拉一定距离->加载第二页->继续前面步骤->没有更多
这是一个用户交互逻辑,而我们需要将其映射为代码逻辑:
首屏自动加载第一页->滑动到底部&&按下时候滑动距离Y轴有一定偏移量->请求后端加载第二页->根据返回字段判断是否还有下一页
有了代码逻辑,主干就出来了,加载和判断由事件来控制,而又作为一个vue组件,我们需要配合vue生命周期来挂载事件和销毁事件
exportdefault{ mounted(){ //确定容器 //容器绑定事件 }, beforeDestory(){ //解绑事件 }, }
如果没有解绑的话,每次你加载组件,就会绑定一次事件…
然后我们需要一些核心事件回调方法来在合适的时间加载数据渲染页面,回想一下,第一我们需要http获取数据的load函数,然后我们需要三个绑定事件的回调函数pointDown(),pointMove(),pointUp(),分别对应用户按下、移动、弹起手指操作:
exportdefault{ ··· methods:{ /** *加载一组数据的方法 */ load(){ //设置options this.$axios.request(options).then((res)=>{ //获取数据后的处理 }).catch((e)=>{ //异常处理 }) }, /** *鼠标按下事件处理函数 *@param{Object}e-事件对象 */ pointerdown(e){ //获取按下的位置 this.pageY=e.changedTouches?e.changedTouches[0].pageY:e.pageY }, /** *鼠标移动事件处理函数 *@param{Object}e-事件对象 */ pointermove(e){ constcontainer=this.$container constpageY=e.changedTouches?e.changedTouches[0].pageY:e.pageY constmoveY=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传入或者一些逻辑控制细节需要再额外添加,贴出整个组件的源码:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。