neumedia-water-fall
v1.1.1
Published
数据列表呈瀑布流形式展示。通过上下拖拽的操作,重新刷新页面数据,或加载更多列表数据。
Downloads
1
Readme
瀑布流列表
数据列表呈瀑布流形式展示。通过上下拖拽的操作,重新刷新页面数据,或加载更多列表数据。
更新历史
| 版本号 | 作者 | 更新记录 | 更新时间 | | ------ | ----------------------- | -------- | ---------- | | 1.0.0 | [email protected] | 初始版本 | 2020.08.04 | | | | | |
安装
npm install neumedia-water-fall
导入
import WaterFall from 'neumedia-water-fall';
export default {
components: {
WaterFall
},
data() {
return {
page: 1,
list: []
};
},
methods: {
getList(page) {
// 获取第 page 页数据,并 return 返回
},
handleRefresh() {
this.page = 1;
return this.getList(this.page);
},
handleLoadPage() {
let list = this.getList(this.page);
this.page = this.page + 1;
return list;
}
}
}
使用
<water-fall v-model="list" :handle-more="handleLoadPage" :handle-refresh="handleRefresh"></water-fall>
API
Props
| 说明 | 说明 | 类型 | 默认值 | | -------------- | ------------------------------------ | -------- | ------------- | | value(v-model) | 列表内容 | Array | [] | | col | 列数 | Number | 2 | | handle-more | 注册上拉加载数据方法(返回单页数据) | Function | function() {} | | handle-refresh | 注册下拉刷新数据方法(返回单页数据) | Function | function() {} |