vue通过vant列表实现下拉到底部加载更多列表数据（vant列表做为子组件的方式）

灵感来源于文章：https://blog.csdn.net/qq_42991509/article/details/105832399

vant列表

原理其实并不难，vant文档上就有很详细的介绍，但在实际使用中难免会遇到一些坑。
vant列表文档：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/list
这边建议将vant-lsit文档理解一下再继续看接下来的内容

vant列表作为子组件

vant-list的Props中的v-modle（loading）和error必须通过watch属性侦听从父组件传过来的值进行绑定。

<template>
  <van-list class="designerList"
            v-model="Loading"
            :finished="finished"
            :offset="offset"
            :immediate-check="false"
            :error.sync="Error"
            finished-text="没有更多了"
            error-text="点击加载更多"
            @load="onload">
    <van-cell v-for="i in designerList"
              :key="i.designerId"
              class="designerList-info">
      <div class="content"></div>
    </van-cell>
  </van-list>
</template>

<script>
export default {
  name: "designerList",
  data () {
    return {
      Loading: false,//必有
      Error: false,//必有
      name: "",
    };
  },
  watch: {
    loading (newVal, oldVal) {
      this.Loading = newVal;
    },
    isClickChange: {
      handler (newValue, oldValue) {
        this.Error = newValue;
      },
      immediate: true,
    },
  },
  methods: {
    onload () {
      setTimeout(() => {
        this.$emit("getMore");
      }, 1000)
    },
  },
  props: {
    designerList: [],
    offset: 0,//滚动条与底部距离小于 offset 时触发load事件，默认300动加载中
    finished: {
      type: Boolean,
      default: false,
    },// 滚动加载完
    loading: {
      type: Boolean,
      default: false,
    },// 滚动加载中
    isClickChange: {
      type: Boolean,
      default: false,
    }
  },
  mounted () {
    this.Error = this.isClickChange;
  }
};
</script>
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

方式一：下拉到底部自动加载更多

原理：通过下拉到底部触发load事件发送数据请求

• 在加载数据前必须手动修改loading为true
• 在加载数据后必须手动修改loading为false

<template>
  <div class="test_noe">
    <!--  列表    -->
    <designerListTest :designerList="designerList"
                      :offset="offset"
                      :loading="loading"
                      :finished="finished"
                      @getMore="getData" />
  </div>
</template>

<script>
import designerListTest from "./components/designer-list-test";

export default {
  components: {
    designerListTest,
  },
  data () {
    return {
      pageNum: 1,
      pageSize: 5,
      designerList: [],
      offset: 0,//滚动条与底部距离小于 offset 时触发load事件，默认300
      loading: false, // 滚动加载中
      finished: false, // 滚动加载完成
    };
  },
  methods: {
    async getData () {
      this.loading = true;//在加载数据前必须手动修改loading为true
      const res = await this.$getData(
        "SearchDesigner",
        {
          searchKeyword: "1234567",
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
        "post",
        false
      );
      if (res.code == 1) {
        console.log("res.data.totalCount", res.data.totalCount);
        this.designerList = this.designerList.concat(res.data.list);
        console.log("this.designerList", this.designerList);
        this.pageNum = this.pageNum + 1;
        console.log("this.pageNum", this.pageNum)
        console.log("this.designerList.length", this.designerList.length)

        if (this.designerList.length === res.data.totalCount) {
          this.finished = true;
        }
      }
      this.loading = false;//在加载数据后必须手动修改loading为false
    },
  },
  mounted () {
    this.getData();
  },
}
</script>

<style>
</style>
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

方式二：下拉到底部点击加载更多

原理：通利用vant-list的Props中error来实现点击加载更多数据

• 在加载数据前必须手动修改loading为true
• 在加载数据后必须手动修改loading为false,必须手动修改isClickChange为true（isClickChange及vant-list中的error）

<template>
  <div class="test_noe">
    <!--  列表    -->
    <designerListTest :designerList="designerList"
                      :offset="offset"
                      :loading="loading"
                      :finished="finished"
                      :isClickChange="isClickChange"
                      @getMore="getData" />
  </div>
</template>

<script>
import designerListTest from "./components/designer-list-test";

export default {
  components: {
    designerListTest,
  },
  data () {
    return {
      pageNum: 1,
      pageSize: 5,
      designerList: [],
      offset: 0,//滚动条与底部距离小于 offset 时触发load事件，默认300
      loading: false, // 滚动加载中
      finished: false, // 滚动加载完成
      isClickChange: true,
    };
  },
  methods: {
    async getData () {
      this.loading = true;
      this.isClickChange = false;
      const res = await this.$getData(
        "SearchDesigner",
        {
          searchKeyword: "1234567",
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
        "post",
        false
      );
      if (res.code == 1) {
        console.log("res.data.totalCount", res.data.totalCount);
        this.designerList = this.designerList.concat(res.data.list);
        console.log("this.designerList", this.designerList);
        this.pageNum = this.pageNum + 1;
        console.log("this.pageNum", this.pageNum)
        console.log("this.designerList.length", this.designerList.length)
        if (this.designerList.length === res.data.totalCount) {
          this.finished = true;
          this.isClickChange = false;
        } else {
          this.isClickChange = true;
        }
      }
      this.loading = false;
    },
  },
  mounted () {
    this.getData();
  },

}
</script>

<style>
</style>
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