<template> 
    <div class="common-container">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onload">
        	<!-- 渲染内容 -->
	        <div class="common-model1">
	         <span class="common-model1-item" v-for="(g,index) in goodsList" :key="g.id">
	           ...
	         </span> 
	          </div>
          	<!-- 渲染内容 -->
        </van-list>
      </van-pull-refresh>
    </div> 
</template>
<script>  
export default {
  data() {
    return { 
      goodsList: [],
      page: 1,
      limit: 20,
      loading: false, //是否正在加载（下拉）
      finished: false, //是否加载完成
      refreshing: false, //是否正在上拉刷新
      timer: "" //定时器
    };
  },
  components: {
    "Jyq-head": JyqHead
  },
  mounted: function() {
    // 先执行 onload(), 第一次记载 getRecommend()
    // list 组件通过loading和finished两个变量控制加载状态，
    // 当组件滚动到底部时，会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据，
    // 数据更新完毕后，将loading设置成false即可。若数据已全部加载完毕，则直接将finished设置成true即可。
    // 下拉刷新时会触发 refresh 事件，在事件的回调函数中可以进行同步或异步操作，
    // 操作完成后将 v-model 设置为 false，表示加载完成。
  },
  methods: {
   onRefresh() {
      // 下拉刷新
      this.finished = false; // 不写这句会导致你上拉到底过后在下拉刷新将不能触发下拉加载事件
      this.loading = true; // 将 loading 设置为 true，表示处于加载状态
      this.onload(); // 重新加载数据
    },
    onload() { 
      // 只要this.finished 不为 true,就自动执行;
      if(!this.finished){  
        this.timer = setTimeout(() => {
            if (this.refreshing) {
            this.refreshing = false;
            } 
            this.getRecommend(); //  获取每日推荐 
            this.loading = false; //  this.loading表示处于加载状态
        }, 1000);
      } 
    },
    async getRecommend() {
      //每日推荐
      var req = {
        page: this.page,
        limit: this.limit
      };
      const { data: res } = await this.$http.post(
        MALL_URL + "api/more/More_Recommend",
        req
      );
      console.log(res);
      if (res.code == 200&& res.data.length > 0) { 
         for (var j = 0; j < res.data.length; j++) {
          this.goodsList.push(res.data[j]);
         }    
      }else {  //请求到的数据 length为 0
        this.finished = true; 
      }
      if (!this.finished) {
        this.page++; 
      }
    } 
  },
  beforeDestroy: function() {
  	//清除定时器
    clearTimeout(this.timer);
  }
};
</script>  
<style lang="scss" scoped> 
</style>

重点步骤：

1. 按需导入

import { PullRefresh , List } from 'vant';
Vue.use(PullRefresh );
Vue.use(List);

2. html 页面结构

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
   <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onload"> 
		<!-- 渲染内容 -->
	    <div class="common-model1">
		     <span class="common-model1-item" v-for="(g,index) in goodsList" :key="g.id">
		       ...
		     </span> 
      	</div> 
   </van-list>
 </van-pull-refresh>

3. data 数据

data(){
	return{
	  loading: false, //是否正在加载（下拉）
	  finished: false, //是否加载完成
	  refreshing: false, //是否正在上拉刷新
	  timer: "" //定时器
	}
} 

4. methods 方法

methods: {
   onRefresh() {
      // 下拉刷新
      this.finished = false; // 不写这句会导致你上拉到底过后在下拉刷新将不能触发下拉加载事件
      this.loading = true; // 将 loading 设置为 true，表示处于加载状态
      this.onload(); // 重新加载数据
    },
    onload() { 
      // 只要this.finished 不为 true,就自动执行;
      if(!this.finished){  
        this.timer = setTimeout(() => {
            if (this.refreshing) {
            this.refreshing = false;
            } 
            this.getRecommend(); //  获取每日推荐 
            this.loading = false; //  this.loading表示处于加载状态
        }, 1000);
      } 
    },
    async getRecommend() {
      //每日推荐
      var req = {
        page: this.page,
        limit: this.limit
      };
      const { data: res } = await this.$http.post(
        MALL_URL + "api/more/More_Recommend",
        req
      );
      console.log(res);
      if (res.code == 200&& res.data.length > 0) { 
         for (var j = 0; j < res.data.length; j++) {
          this.goodsList.push(res.data[j]);
         }    
      }else {  //请求到的数据 length为 0
        this.finished = true; 
      }
      if (!this.finished) {
        this.page++; 
      }
    } 
  },

5. 清除定时器

beforeDestroy: function() { //清除定时器
  clearTimeout(this.timer);
}