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>
