vant下拉刷新

 1 <template>
 2   <div>
 3       <van-pull-refresh v-model="refreshing" @refresh="onRefresh" loosing-text="释放刷新" pulling-text="下拉刷新" success-text="刷新成功">
 4           <van-list
 5             v-model="loading"
 6             :finished="finished"
 7             finished-text="没有更多啦"
 8             offset="10"
 9             :immediate-check="false"
10             @load="onLoad">
11                 <div class="list" v-for="(item,index) in list" :key="index">
12                     {{item.name}}
13                 </div>
14           </van-list>
15         </van-pull-refresh>
16   </div>
17 </template>
18 
19 <script>
20 import { List,PullRefresh} from 'vant'
21 export default {
22   components:{
23       [List.name]:List,
24       [PullRefresh.name]:PullRefresh,
25   },
26   data() {
27     return {
28         list: [],
29         loading: false,
30         finished: false,
31         refreshing: false,
32         param:{
33             "page": 1,
34             "rows": 10,
35         }
36     };
37   },
38   mounted() {
39       this.getList()
40   },
41   methods: {
42     async getList(){
43         this.param.page = 1
44         this.$http.getList(this.param).then( res => {
45             this.list = res.datas    //datas是列表集合
46             // totals是后台返回的列表总条数
47             if(res.totals === this.list.length){
48                 this.finished = true
49             }else {
50                 this.finished = false
51             }
52             this.param.page = 2
53             this.refreshing = false
54             this.loading = false
55         })
56     },
57     onLoad() {
58         this.$http.getList(this.param).then( res => {
59             let datas = res.datas
60             this.list = this.list.concat(datas)
61             if (this.list.length < res.totals) {
62                 this.param.page++
63                 this.loading = false
64             }else{
65                 this.finished = true
66                 this.loading = true
67             }
68         })
69     },
70     onRefresh() {
71         this.getList()
72     }
73   }
74 }
75 </script>