基于vue开箱即用的全局组件上滑无限滚动加载更多、下拉刷新
下图gif可能有卡顿，图片原地址
+ 若适用就来个star吧
使用方法
首先项目中安装：npm install vue-loadmore-simple -S
//main.js
import LoadMore from 'vue-loadmore-simple'
Vue.use(LoadMore)
//template
<template>
<load-more
:pageIndex="pageIndex"
:pageSize="pageSize"
:totalCount="totalCount"
:openRefresh="true"
@refresh="refresh"
@loadmore="loadmore">
<div v-for="(item,index) in list" :key="index">
...
</div>
</load-more>
</template>
<script>
export default {
data() {
//注意：当含有上图gif中tab切换或者筛选功能时，请初始化this.totalCount=-1;this.pageIndex=1
return {
pageIndex: 1,
pageSize: 10,
totalCount: 0
}
},
methods:{
loadmore(pageIndex){
//上滑加载更多，pageIndex为下一页页码,
this.pageIndex = pageIndex
console.log('加载更多中...')
},
refresh(){
console.log('您下拉刷新了')
}
},
}
</script>- 注意：当含有上图gif中tab切换或者筛选功能时，请初始化this.totalCount=0;this.pageIndex=1 参数如下
- :pageIndex：页码 （必选）
- :pageSize：页的大小（必选）
- :totalCount：总条数（必选）
- :openRefresh：true，默认false，只有开启以后才能启动下拉刷新*
回调函数
- @loadmore：下滑到底时的回调，回调中的参数是下一页的页码
- @refresh：下拉刷新
github链接 链接名称
