基于vue开箱即用的全局组件上滑无限滚动加载更多、下拉刷新
下图gif可能有卡顿,图片原地址
+ 若适用就来个star吧
使用方法
首先项目中安装:npm install vue-loadmore-simple -S
//main.jsVue//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> { //注意:当含有上图gif中tab切换或者筛选功能时,请初始化this.totalCount=-1;this.pageIndex=1 return pageIndex: 1 pageSize: 10 totalCount: 0 } methods: { //上滑加载更多,pageIndex为下一页页码, thispageIndex = pageIndex console } { console } </script>
- 注意:当含有上图gif中tab切换或者筛选功能时,请初始化this.totalCount=0;this.pageIndex=1
参数如下
- :pageIndex:页码 (必选)
- :pageSize:页的大小(必选)
- :totalCount:总条数(必选)
- :openRefresh:true,默认false,只有开启以后才能启动下拉刷新*
回调函数
- @loadmore:下滑到底时的回调,回调中的参数是下一页的页码
- @refresh:下拉刷新
github链接 链接名称