vue-上拉加载、下拉刷新组件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

vue在移动端开发过程中，上拉加载、下拉刷新是页面的基本需求，现在给大家介绍一种基于touch事件封装的刷新组件。

组件支持传参、传递事件、请求成功异步回调、上拉与触底触发加载或刷新。

父子组件间的通信

这里我们有两个页面，父组件note.vue与刷新组件baseScroll.vue。

通过Prop向子组件传递数据、通过事件向父组件发送消息、通过插槽slot分发内容。

note：

<base-scroll v-bind:url="url"
v-bind:param="param"
@send-data="sendData"
ref="baseScroll">
<div slot="content">

</div>
</base-scroll>

这里我们note页面向子组件传递了请求地址、参数，sendData则用来接收子组件的事件回调。

baseScroll：

props:{
// 请求数据的地址
url:'',
// 请求参数
param:{
type: Object,
},
// 每页显示数据条数
pageSize: {
default:10
},
pageNoName: {
default: 'page_no'
},
pageSizeName: {
default: 'page_size'
},
}

下拉刷新、上拉加载触发条件

组件里面我们使用touch相关事件来达到刷新、加载的效果。

baseScroll：

其实机制很简单，就是上滑到页面顶部触发刷新，滑动到页面触底触发数据加载。关键我们要通过偏移量来判断什么时候刷新或加载。这里有篇详细介绍页面偏移量的文章，点我传送门！

baseScroll：

touchStart(e) {
// 屏幕高度
this.clientHeight=parseInt(`${document.documentElement.clientHeight}`)
//滚动开始页面距顶距离
this.scrollTopStart=window.scrollY
// 页面高度
this.pageHeight=e.currentTarget.clientHeight
// 触摸距离页面起点
this.startY = e.targetTouches[0].pageY
// 触摸距离屏幕起点
this.clientY = e.targetTouches[0].clientY
},
touchEnd(e) {
if(!this.hasMove)return
this.hasMove=false
// 滚动结束页面距顶距离
this.scrollTopEnd=window.scrollY
var sLength=this.scrollTopEnd-this.scrollTopStart
if(this.clientHeight+this.startY+sLength+15>=this.pageHeight+this.clientY){
this.nextPage() //页面加载
}else if(this.startY+sLength<=this.clientY){
this.refresh() //页面刷新
}
},
touchMove(e) {
this.hasMove=true
},

touchStart拿到滚动起点的位置及其他页面或屏幕高度；touchEnd中通过判断滚动的值来确定是加载或刷新；hasMove值用来区分用户的操作是点击还是滑动。

加载数据、执行回调

确认后是下拉刷新还是上拉加载后，我们执行相应的操作。

baseScroll：

refresh(){
this.currPageNo = 1
this.getData(data=>{ },0)
},
nextPage(){
this.getData(data => {
}, 1)
},
getData(callback, type){
var self=this
// 设置分页参数
if (typeof this.param === 'string') {
this.param = JSON.parse(this.param);
}
this.param[this.pageNoName]=this.currPageNo
this.param[this.pageSizeName]=this.pageSize
$.ajax({
type: "get",
url: this.url,
data: this.param,
dataType: 'json',
success: function (res) {
var data=res.data
callback(data)
self.currPageNo += 1;
self.$emit('send-data', data,type)
},
})
},