neumedia-infinite-scroll
v1.2.0
Published
通过上下拖拽的操作,重新刷新页面数据,或加载更多列表数据。
Downloads
5
Readme
拖拽刷新/加载更多
通过上下拖拽的操作,重新刷新页面数据,或加载更多列表数据。
更新历史
| 版本号 | 作者 | 更新记录 | 更新时间 | | ------ | ----------------------- | -------- | ---------- | | 1.0.0 | [email protected] | 初始版本 | 2020.08.03 | | | | | |
安装
npm install neumedia-infinite-scroll
导入
import InfiniteScroll from 'neumedia-infinite-scroll';
export default {
components: {
InfiniteScroll
},
data() {
return {
page: 1,
list: [],
incr: []
};
},
methods: {
getList(page) {
// 获取第 page 页数据
this.
},
handleRefresh() {
this.page = 1;
this.getList(this.page);
},
handleLoadPage() {
let list = this.getList(this.page);
this.page = this.page + 1;
return list;
}
}
}
使用
<infinite-scroll v-model="list" :update="update" :handle-more="handleLoadPage" :handle-refresh="handleRefresh"></infinite-scroll>
API
Props
| 说明 | 说明 | 类型 | 默认值 | | -------------- | ------------------------------------ | -------- | ------------- | | value(v-model) | 列表内容 | Array | [] | | handle-more | 注册上拉加载数据方法(返回单页数据) | Function | function() {} | | handle-refresh | 注册下拉刷新数据方法(返回单页数据) | Function | function() {} |
Slots
| 名称 | 说明 | | ---------- | ------------------------ | | no-more | 没有更多内容时的显示文字 | | no-results | 没有内容时的显示文字 |