13.上拉刷新--vant-top250

vant-ui—list https://youzan.github.io/vant/#/zh-CN/list

1.main.js中引入依赖

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

2.使用组件

<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
</van-list>
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false
    };
  },

3.发送请求

export default {
    name:"Detail",
    data(){
      return{
        subjects:[],
        finished:false,
        count:10,
        loading:false
      }
    },
 mounted(){
    this.axios.get('/v2/movie/top250').then(res=>{    //初次渲染数据
        this.subjects=res.data.subjects;
      })
    },
 methods:{
  onLoad(){
        /* 异步更新数据 */           //上拉刷新
   var url=`https://douban-api.now.sh/v2/movie/top250?count=${this.count}&
         start=${this.subjects.length}`;
   this.axios.get(url).then(res=>{
      this.subjects=this.subjects.concat(res.data.subjects);
       // 加载状态结束
       this.loading=false;
     });
      /* 数据全部加载完成 */
     if(this.subjects.length>=250){
        this.finished=true;
      }
     }
    }
  }
//
<template>
  <div class="container">
     <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
     <Movies :data="item" v-for="item of subjects" :key="item.id"></Movies>
     </van-list>
  </div>
</template>