安装vue-pull-to
npm install vue-pull-to --save
在需要的组件中引用并注册
import PullTo from 'vue-pull-to'
...
components: {PullTo},
使用组件
<pull-to
:bottom-load-method="infiniteHandler"
:is-top-bounce=false
:bottom-config="BOTTOM_DEFAULT_CONFIG">
</pull-to>
将这段代码套在需要完成上拉加载的外面 需要注意的是,vue-pull-to的父组件必须要给定高度,否则移动端上拉手势失效
pull-to提示文字的配置
BOTTOM_DEFAULT_CONFIG: {
pullText: "上滑继续加载",
triggerText: "释放更新",
loadingText: "加载中,请稍后",
doneText: "内容已全部展示了",
failText: "加载失败",
loadedStayTime: 1000,
stayDistance: 50,
triggerDistance: 50,
list: ""
},
这里讲一下对上拉加载的理解,后台对展示数据做了分页处理,屏幕上默认展示第一页,当拉到底部时,使页数加一,在请求后台数据,并将其加入到之前的数组。屏幕拉到底部的函数时间pull-to组件已经自己设置好了,不需要再去处理,这里贴一下拉到底部后请求后台数据的代码
infiniteHandler(loaded) {
this.pages++;//页码数加一
console.log(this.pages);
this.$http({
url: '接口',
method: 'post',
data: {
参数:数值
}
})
.then(response => {
console.log(response);
let data = response.data.data;
this.maxPage = data.all_page;//获取后台数据总页数
if (this.pages <= this.maxPage) {
console.log(this.pages);
this.categoryList = this.categoryList.concat(data.list);//将获取的数据加入原先的数组
this.BOTTOM_DEFAULT_CONFIG.doneText = this.BOTTOM_DEFAULT_CONFIG.pullText;
loaded("done");//结束上拉
} else {
this.BOTTOM_DEFAULT_CONFIG.doneText = "内容已全部展示";
//结束刷新功能
loaded("done");
}
});
}
这就是用pull-to完成上拉加载的步骤了,希望大家开心