vue瀑布流组件实现上拉加载更多

2023-07-29 13:45:03 80

最近在做移动端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传入或者一些逻辑控制细节需要再额外添加，贴出整个组件的源码：




importaxiosfrom'axios'

constCancelToken=axios.CancelToken

exportdefault{
data(){
return{
/**
*总页数（由服务端返回）
*@type{number}
*/
count:0,

/**
*是否正在拖拽中
*@type{boolean}
*/
dragging:false,

/**
*已加载次数
*@type{number}
*/
times:0,

/**
*已开始记载
*@type{boolean}
*/
started:false,

/**
*正在加载中
*@type{boolean}
*/
loading:false,
}
},

props:{
/**
*初始化后自动开始加载数据
*/
autoload:{
type:Boolean,
default:true,
},

/**
*离组件最近的可滚动父级元素（用于监听事件及获取滚动条位置）
*/
container:{
//SelectororElement
default:'body',
},

/**
*禁用组件
*/
disabled:{
type:Boolean,
default:false,
},

/**
*Axios请求参数配置对象
*{@linkhttps://github.com/mzabriskie/axios#request-config}
*/
options:{
type:Object,
default:null,
},

/**
*起始页码
*/
page:{
type:Number,
default:1,
},

/**
*每页加载数据条数
*/
rows:{
type:Number,
default:10,
},

/**
*数据加载请求地址
*/
url:{
type:String,
default:'',
},
},

computed:{
/**
*是否可以加载
*@returns{boolean}是与否
*/
loadable(){
return!this.disabled&&(!this.started||(this.page+this.times)<=this.count)
},
},

mounted(){
letcontainer=this.container

if(container){
if(typeofcontainer==='string'){
container=document.querySelector(container)
}elseif(!container.querySelector){
container=document.body
}
}

if(!container){
container=document.body
}

this.$container=container
this.onPointerDown=this.pointerdown.bind(this)
this.onPointerMove=this.pointermove.bind(this)
this.onPointerUp=this.pointerup.bind(this)

if(global.PointerEvent){
container.addEventListener('pointerdown',this.onPointerDown,false)
container.addEventListener('pointermove',this.onPointerMove,false)
container.addEventListener('pointerup',this.onPointerUp,false)
container.addEventListener('pointercancel',this.onPointerUp,false)
}else{
container.addEventListener('touchstart',this.onPointerDown,false)
container.addEventListener('touchmove',this.onPointerMove,false)
container.addEventListener('touchend',this.onPointerUp,false)
container.addEventListener('touchcancel',this.onPointerUp,false)
container.addEventListener('mousedown',this.onPointerDown,false)
container.addEventListener('mousemove',this.onPointerMove,false)
container.addEventListener('mouseup',this.onPointerUp,false)
}

if(this.autoload){
this.load()
}
},

//eslint-disable-next-line
beforeDestroy(){
constcontainer=this.$container

if(global.PointerEvent){
container.removeEventListener('pointerdown',this.onPointerDown,false)
container.removeEventListener('pointermove',this.onPointerMove,false)
container.removeEventListener('pointerup',this.onPointerUp,false)
container.removeEventListener('pointercancel',this.onPointerUp,false)
}else{
container.removeEventListener('touchstart',this.onPointerDown,false)
container.removeEventListener('touchmove',this.onPointerMove,false)
container.removeEventListener('touchend',this.onPointerUp,false)
container.removeEventListener('touchcancel',this.onPointerUp,false)
container.removeEventListener('mousedown',this.onPointerDown,false)
container.removeEventListener('mousemove',this.onPointerMove,false)
container.removeEventListener('mouseup',this.onPointerUp,false)
}

if(this.loading&&this.cancel){
this.cancel()
}
},

methods:{
/**
*加载一组数据的方法
*/
load(){
if(this.disabled||this.loading){
return
}

this.started=true
this.loading=true

constparams={
currentPage:this.page+this.times,
pageSize:this.rows,
}
constoptions=Object.assign({},this.options,{
url:this.url,
cancelToken:newCancelToken((cancel)=>{
this.cancel=cancel
}),
})

if(String(options.method).toUpperCase()==='POST'){
options.data=Object.assign({},options.data,params)
}else{
options.params=Object.assign({},options.params,params)
}

this.$axios.request(options).then((res)=>{
constdata=res.result

this.times+=1
this.loading=false
this.count=data.pageCount
this.$emit('success',data.list)
this.$emit('complete')
}).catch((e)=>{
this.loading=false
this.$emit('error',e)
this.$emit('complete')
})
},

/**
*重置加载相关变量
*/
reset(){
this.count=0
this.times=0
this.started=false
this.loading=false
},

/**
*重新开始加载
*/
restart(){
this.reset()
this.load()
},

/**
*鼠标按下事件处理函数
*@param{Object}e-事件对象
*/
pointerdown(e){
if(this.disabled||!this.loadable||this.loading){
return
}

this.dragging=true
this.pageY=e.changedTouches?e.changedTouches[0].pageY:e.pageY
},

/**
*鼠标移动事件处理函数
*@param{Object}e-事件对象
*/
pointermove(e){
if(!this.dragging){
return
}

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
},
},
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue瀑布流组件实现上拉加载更多

热门推荐

随机推荐