移动端vant滑动加载

<template>
  <div v-loading="loading" style="height: 100%">
    <div id="dataList" class="collect-list" @scroll="handleScroll">
      <div v-if="showNull" class="no-data">暂无数据</div>
      <div v-for="(item, index) in pageData" :key="index" class="collect-card">
        <h2>{{ item.Title }}</h2>
        <dl><dd> 内容: <span>{{ item.CustomResult }}</span> </dd></dl>
      </div>
    </div>
  </div>
</template>
<script>
//请求接口路径
import { getViewCustomList,} from "@/views/ics/api/project-pending.js";
export default {
  name: "viewCustom",
  data() {
    return {
      pageData: Object.freeze([]),   //数据集
      //分页
      queryParams: {
        PageIndex: 1,
        PageSize: 20,
      },
	
      loading: false,
      total: 0,
      hasNextPage: false,
      scrollTop: 0,
      windowHeight: 0,
    };
  },
  computed: {
    showNull() {
      return this.pageData.length <= 0 && !this.loading;
    },
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      var dataList = document.getElementById("dataList");
      dataList.style.height = document.documentElement.clientHeight - 96 + "px";
      this.loading = true;
      // setTimeout(() => {    //模拟loading 
        let params = JSON.parse(JSON.stringify(this.queryParams));
        getViewCustomList(params)
          .then((rep) => {
            this.loading = false;
            if (rep.Code === 0) {
              if (rep.Data.pageInfo.List.length > 0) {
                this.hasNextPage = rep.Data.pageInfo.HasNextPage;
                if (this.pageData === []) {
                  this.pageData = rep.Data.pageInfo.List;
                } else {
                  this.pageData = this.pageData.concat(rep.Data.pageInfo.List);
                }
                this.total = rep.Data.pageInfo.Total;
              }
            }
          })
          .catch(() => {
            this.loading = false;
          });
      // }, 1000);

    },

  
    handleScroll() {
      let _that = this;
      var bady = document.getElementById("dataList");
      this.scrollTop = bady.scrollTop;          // 获取距离顶部的距离
      this.windowHeight = bady.clientHeight;    // 获取可视区的高度
      var scrollHeight = bady.scrollHeight;     // 获取滚动条的总高度
      if (this.scrollTop + this.windowHeight >= scrollHeight) {
        // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
        if (!_that.hasNextPage) return;
        //请求数据接口
        this.queryParams.PageIndex += 1;
        this.load();
        return false;
      }
    },
  },
};
</script>
<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 1.15;
  font-family: "pingfang SC", "helvetica neue", arial, "hiragino sans gb",
  "microsoft yahei ui", "microsoft yahei", simsun, sans-serif;
}

body {
  background: #f2f2f2;
}

.collect-header .ch-tabs {
  background: #fff;
  position: relative;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

.collect-header .ch-tabs:after {
  content: "";
  position: absolute;
  z-index: 2;
  background-color: #e2e4ea;
  transform-origin: 100% 50%;
  transform: scaleY(0.5) translateY(100%);
  -webkit-transform: scaleY(0.5) translateY(100%);
  -o-transform: scaleY(0.5) translateY(100%);
  -moz-transform: scaleY(0.5) translateY(100%);
  left: 0;
  width: 100%;
  height: 0.04rem;
}

.collect-header .ch-tabs ul,
.collect-header .ch-nav ul {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
  list-style: none;
}

.collect-header .ch-tabs li a {
  font-size: 0.28rem;
  color: #666;
  display: block;
  height: 1rem;
  line-height: 1rem;
  position: relative;
  padding: 0 0.24rem;
}

.collect-header .ch-tabs li.active a {
  color: #3b65a4;
  font-weight: 700;
}

.collect-header .ch-tabs li.active a:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.02rem;
  content: "";
  height: 3px;
  background: #2b66a9;
  border-radius: 0.04rem;
  display: block;
  overflow: hidden;
}

.collect-header .ch-nav ul {
  padding: 0.22rem 0.2rem 0.2rem;
  background: #fff;
  overflow: hidden;
}

.collect-header .ch-nav li a {
  font-size: 0.26rem;
  color: #666;
  display: block;
  height: 0.5rem;
  line-height: 0.5rem;
  min-width: 1.2rem;
  position: relative;
  padding: 0 0.16rem;
  border-radius: 0.25rem;
  text-align: center;
}

.collect-header .ch-nav li.active a {
  color: #3b65a4;
  background: #ebf2fb;
}

.collect-list {
  overflow: auto;
}

.collect-list .collect-card {
  background: #fff;
  margin-top: 0.2rem;
  padding: 0.32rem 0.32rem 0;
}

.collect-list .collect-card h2 {
  font-size: 0.3rem;
  font-weight: 700;
  margin-bottom: 0.14rem;
}

.collect-list .collect-card dl dd,
.collect-list .collect-card dl dd span {
  font-size: 0.26rem;
  color: #999;
  line-height: 0.44rem;
}

.collect-list .collect-card dl dd span.orange {
  color: #dd742c;
}

.collect-list .collect-card .time {
  padding: 0.17rem 0;
  border-top: 0.02rem solid #e2e4ea;
  overflow: hidden;
  margin-top: 0.16rem;
}

.collect-list .collect-card .time span {
  line-height: 0.46rem;
  font-size: 0.26rem;
  color: #666;
  display: block;
  float: left;
}

.collect-list .collect-card .time b {
  display: block;
  float: right;
  font-size: 0.24rem;
  text-align: center;
  font-weight: normal;
  border-radius: 0.1rem;
  height: 0.46rem;
  line-height: 0.42rem;
  padding: 0 0.14rem;
}

.type-bule {
  border: 0.02rem solid #b0d9f9;
  color: #489fe3;
  background: #ecf7ff;
}
.type-green {
  border: 0.02rem solid #d5ecb1;
  color: #91be4c;
  background: #f0ffda;
}
.type-orange {
  border: 0.02rem solid #f7dac6;
  color: #dd742c;
  background: #fff6e9;
}
.no-data {
  color: #999;
  text-align: center;
  margin-top: 0.2rem;
  font-size: 0.3rem;
}
</style>

代码直接修改请求后台接口的部分就可以用了

要注意测试时，列表的条数一定要 等于或者大于滚动条的总高度就是到达底部
最好测试时 先把分页的值给大点，测试成功后在调整。

“style” 标签内的css也要一起复制，放到页面中

**注：不能使用 async 异步 await **
例如：这样获取后台数据

 async load () {
      this.loading = true
      try {
        const { Code, Data }  = await this.$http.post('/api/ics/...', this.queryParams)
        if (Code === 0) {
          this.tableData = Object.freeze(Data.pageInfo.List)
          this.totalCount = Data.pageInfo.Total
        } else {
          this.$message.error(`获取失败。Code: ${Code}`)
        }
      } catch (ex) {
        this.$message.error(`获取异常：${ex}`)
      } finally {
        this.loading = false
      }
    },