vue移动端实现滚动加载更多，vant里面的list

1.局部引用安装的vant 的list
在当前有滚动加载更多引如

<script>
  import Vue from 'vue'
  import { List } from 'vant'
  import 'vant/lib/index.css'
  Vue.use(List);
</script>

2.在data变量中定义

data() {
      return {
        offset:0,//滚动条与底部距离小于 offset 时触发load事件，默认300
        pageNo: 1, // 当前页码
        pageSize: 10, // 分页大小
        total: 0, // 查询总条数
        loading: false, // 滚动加载中
        finished: false, // 滚动加载完成
        charityData:[ ],
      };
    },

3.html结构

<div class="content_box">
        <van-list
                v-model="loading"
                :finished="finished"
                :offset="offset"
                finished-text="没有更多了"
                @load="onLoad"
        >
          <ul class="news_item">
            <li class="news_wrap"
                v-for="item in charityData"
                :key="item.charitableProjectId"
            >
              <div class="my_news_content">
                <div @click="goCharityDetail(item.charitableProjectId)">
                  <div class="title">
                    <span class="title_good">{{item.charitableType}}</span>
                    <span class="title_name">{{item.charitableProject}}</span>
                  </div>
                  <div class="chamber_news">
                    <div class="img_wrap clip_path">
                      <img  :src='item.photoPath' alt="">
                    </div>
                    <div class="news_infor">
                      <p class="title_con pf-semibold ellipsis3">{{item.projectSummary}}</p>
                      <div class="love_title">
                        <strong>已筹金额</strong>
                        <span >累计爱心</span>
                      </div>
                      <div class="love">
                        <span class="money"><em>{{item.donateAmount}}</em> 元 </span>
                        <span class="number"><em>{{item.donations}}</em> 次 </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="line"></div>
            </li>
          </ul>
        </van-list>
    </div>

4.js的方法

//获取列表数据
      getDutyList() {
        return new Promise((resolve, reject) => {
          let params = {
            pageNo: this.pageNo,
            pageSize: this.pageSize,
          };
          this.axios.get(charityApi.charity.charityList, {params}).then((res) => {
            if (res.data.status == 0) {
                  if (res.data.data.resultData.length > 0) {
                    let result = {
                      total: res.data.data.total,
                      pageNo: res.data.data.pageNo,
                      charityData: res.data.data.resultData,
                    };
                    //组装图片地址
                    let myCharityData = res.data.data.resultData;
                    result.charityData = myCharityData.map(item => {
                      return Object.assign({}, item, {
                        photoPath: PATH_IMG + item.activityHeadUrl
                      })
                    });
                    resolve(result);
              }
            }
          }).catch((err) => {
            reject(err);
          });
        })
      },

      // 滚动加载更多
      onLoad() {
        this.loading = true;
        this.getDutyList().then((res) => {
          this.charityData = this.charityData.concat(res.charityData);
          if (this.charityData.length>=res.total) {
            this.finished = true;
          } else {
            this.finished = false;
            this.pageNo = this.pageNo + 1
          }
          this.loading = false
        });
      },
      alert(msg) {
        this.$toast.showToast({
          msg: msg,
          duration: 2000,
        });
      },