vant列表加载上拉刷新

1.话不多说
2.vant有赞

3.上代码

<template>
  <div>
    <div class="list-content" id="list-content">
      <!--vant列表组件，上拉加载-->
        <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad"
          :offset="10"
        >
          <div class="list-item">
            <ul class="mui-table-view">
              <li class="mui-table-view-cell mui-media" v-for="item in MyRecommendsData">
                <img class="mui-media-object mui-pull-left" :src="item.HeadImgUrl">
                <div class="mui-media-body textalign">
                  {{item.Name}}
                  <p class='mui-ellipsis'>锁定时间：<span>{{item.CreateDate}}</span></p>
                </div>
              </li>
            </ul>
          </div>
        </van-list>
    </div>
  </div>
</template>

<script>

  import Vue from 'vue'
  import axios from 'axios'
  import allApi from '../js/request.js'
  // import {PullRefresh} from 'vant'
  import { Tab, Tabs } from 'vant';
  import { List } from 'vant';
  Vue.use(Tab).use(List);
  Vue.use(Tabs);

  export default {
    data(){
      return {
        loading: false,   //是否处于加载状态
        finished: false,  //是否已加载完所有数据
        PageIndex:0,
        MyRecommendsData:[],
      }
    },
    created(){

    },
    methods:{
      onLoad() {      //上拉加载
          let self=this;
          self.PageIndex+=1
          setTimeout(() => {
            axios.post(allApi.MyRecommends, {
              Status: 1,
              PageIndex: self.PageIndex,
              PageSize: 10,
            }).then(function (res) {
              for(var i=0;i<res.data.Result.Data.length;i++){
                self.MyRecommendsData.push(
                  {
                    CreateDate: res.data.Result.Data[i].CreateDate,
                    HeadImgUrl: res.data.Result.Data[i].HeadImgUrl,
                    Name: res.data.Result.Data[i].Name,
                    SignedTime: res.data.Result.Data[i].SignedTime,
                  }
                )
              }
              self.loading=false;//成功关闭loading
            }).catch(function (res) {
              console.log(res);
            });
          }, 500);
      },
    },
    mounted(){
      let winHeight = document.documentElement.clientHeight                          //视口大小
      document.getElementById('list-content').style.height = (winHeight -0) +'px'  //调整上拉加载框高度
    },


  }
</script>

<style scoped>
  .list-content{
    /*margin-top:46px;*/
    overflow:scroll;
  }
  .list-item{
    text-align:center;
  }

  /*.mmCustomerlist{*/
    /*height: 100%;*/
    /*position: fixed;*/
    /*top: 0;*/
    /*width: 100%;*/
    /*overflow-y: scroll;*/
  /*}*/
  .textalign{
    text-align: left;
  }
</style>

4.over

来源：https://blog.csdn.net/weixin_43023873/article/details/99946741