vantにおけるlistリストコンポーネントの使用(詳細コメント付)

	//       
   
 
   		
{{item}}       

   
   
 
  
js:
 data  :
 
  
data() {
	return {
	  loading: false, 		//         
      finished: false, 		//        
      error: false, 		//       
      list: [],				//   
      page: 1,				//   
      page_size: 10			//     
      total: 0				//      
	}
}
  
methods    :
methods: {
	//         
    async getList() {
      let { data: res } = await informList({ 
          page: this.page,
          page_size: this.page_size,
      })
      if (res.length === 0) {  		//            0
        this.list = [];				//     
        this.finished = true;		//     
      }
      //         0
      this.total = res.total;		//        
      this.list.push(...res.list)	//      list 
      this.loading = false;			//        
      //   list           ,        
      if (this.list.length >= res.total) {
          this.finished = true;		//       
      }
    },
	//   @load     
    onLoad() { //         
      let timer = setTimeout(() => {	//                 ,   axios        
        this.getList();					//       ,    
        this.page++;					//      
        this.finished && clearTimeout(timer);//     
      }, 100);
    },
	//         
    onRefresh() {
      this.finished = false; 		//       
      this.loading = true; 			//   loading     true，        
      this.page = 1;				//       1
      this.list = [];				//     
      this.onLoad(); 				//       
    }
  }
  
OK,vantのlistコンポーネントの  な  が  した.