https://github.com/larryzhuo/vue-pull-to-refresh-and-load-more
a scroll component with function of pull up refresh and pull down load more for vue
https://github.com/larryzhuo/vue-pull-to-refresh-and-load-more
javascript scroller vue
Last synced: 3 days ago
JSON representation
a scroll component with function of pull up refresh and pull down load more for vue
- Host: GitHub
- URL: https://github.com/larryzhuo/vue-pull-to-refresh-and-load-more
- Owner: larryzhuo
- Created: 2016-10-13T08:55:38.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-13T09:39:22.000Z (about 9 years ago)
- Last Synced: 2024-07-27T14:14:13.207Z (over 1 year ago)
- Topics: javascript, scroller, vue
- Language: JavaScript
- Size: 19.5 KB
- Stars: 14
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-refactor - vue-pull-refresh-and-load-more
README
# vue-pull-to-refresh-and-load-more
a scroll component with function of pull down refresh and pull up load more for vue
I create a scroller component for vue base iscroll-lite. it support more than one scroller in one page
```vue
import Scroller from './iscroller/ZZScroll.vue'
const PageSize = 20;
export default{
components: { Scroller},
data () {
return {
nowType: 0,
alls: [
{ list: [], pageNo: 1, hasMore: true },
{ list: [], pageNo: 1, hasMore: true }
]
},
methods: {
initList (type, isRefresh, succCall, errCall) {
succCall = succCall || function(){};
errCall = errCall || function(){};
let opt = {}, self = this, temp = this.alls[type];
if(isRefresh) {
temp.list.length = 0; //不使用 =[]; 会出现短暂的空白
temp.pageNo = 1;
temp.hasMore = true;
}
opt.pageNo = temp.pageNo;
opt.pageSize = PageSize;
opt.status = type;
Http.post('SAAS_H5_GetItemOrderList', opt).then((data) => {
data = data.body;
temp.list = temp.list.concat(data.orderList);
self.storePhone = data.storePhone; //保存店铺电话
if( temp.pageNo >= Math.ceil(data.totalCount / PageSize) ){ //判断数据是否加载完全
temp.hasMore = false;
succCall(data);
return;
}
temp.pageNo++;
succCall(data);
}, () => {
errCall();
});
},
refresh (scrollId) {
let self = this;
let type=scrollId.slice(-1);
this.initList(type, true, function(){
self.$broadcast('refresh-finish', {errorCode: 0, scrollId: scrollId});
}, function(){
self.$broadcast('refresh-finish', {errorCode: -1, scrollId: scrollId});
})
},
loadMore (scrollId) {
let self = this;
let type=scrollId.slice(-1);
this.initList(type, false, function(){
self.$broadcast('load-finish', {errorCode: 0, scrollId: scrollId});
}, function(){
self.$broadcast('load-finish', {errorCode: -1, scrollId: scrollId});
})
}
}
}
```
as you can see, this scroller has some props:
- hswipe-stop-scroll: work for when you swipe scroll, stop vertical scroll.
- init-load-more: work for if you need load data when init this component.
- wrapper-id and scroll-id: work for specify many scroller in one page.
- need-refresh: work for if you need the refresh and load more function.
- refresh-call: work for pull down refresh call.
- load-more-call: work for pull up load more call.
- has-more-data: work for load more status, if false, it will show 'no more data'.
- more-tip: work for control 'no more data' tip shows.
above, I give a example to use in a ajax request base vue. when you $broadcast 'refresh-finish' or 'load-finish'. remeber the transfer scrollId. and errorCode:0 is success. errorCode:-1 is false.
