1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
| /**
| * 下了列表混入
| * @type {{data(): *, methods: {upCallback(*): void, downCallback(): void, loadList(*): void}}}
| */
| const ListMixin = {
| data() {
| return {
| downOption:{
| auto:false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
| },
| upOption:{
| page:{
| num : 0 ,
| size : 8 ,
| time : null
| }
| },
| queryParam:{
| pageNo:1,
| pageSize:8
| },
| list:[],
| pageNo:1,
| pageSize:8,
| }
| },
| methods: {
| /*下拉刷新的回调 */
| downCallback(){
| //加载列表数据
| this.loadList('down');
| },
| /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
| upCallback(page) {
| let param = this.queryParam
| param.pageNo= page.num,
| param.pageSize= page.size
|
| if(page.num == 1){
| this.list = [];
| }
| console.log("upCallback==param::",param)
| this.$http.get(this.url,{params:param}).then(res=>{
| console.log("upCallback请求返回res",res)
| if(res.data.success){
| let rec=res.data.result.records;
| let hasNext=true;
| if(!rec || rec.length<this.pageSize){
| console.log("加载完成!没有更多了")
| hasNext=false;
| }
| console.log("hasNext",hasNext)
| //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
| this.mescroll.endSuccess(rec.length);
|
| //设置列表数据
| this.list=this.list.concat(rec);
| this.$forceUpdate();
| }else{
| this.mescroll.endErr();
| }
| }).catch(()=>{
| //加载失败, 结束
| this.mescroll.endErr();
| })
| },
| loadList(flag){
| let param = this.queryParam
| param.pageNo=this.pageNo,
| param.pageSize=this.pageSize
| console.log("请求参数",param)
| this.$http.get(this.url,{params:param}).then(res=>{
| if(res.data.success){
| console.log("请求返回res.data",res.data)
| let rec=res.data.result.records
| if(flag=='down'){
| //下拉刷新成功的回调,隐藏下拉刷新的状态
| this.mescroll.endSuccess();
| }
| //添加新数据
| this.list=rec;
| /* if(!rec || rec.length<this.pageSize){
| console.log("加载完成!")
| } */
| }else{
| console.log("请求返回else",res)
| this.mescroll.endErr();
| }
| }).catch((err)=>{
| console.log("请求返回err",err)
| //加载失败, 结束
| this.mescroll.endErr();
| })
| },
| }
|
| }
|
| export default ListMixin;
|
|
