<van-list
  v-model="loading" class="van-list-style" :immediate-check="false"
  :finished="finished" :finished-text="finishedText"
  :error.sync="error" error-text="請求失敗，點擊重新加載"
  @load="onLoad">
  <div class="list" v-if="dataList.length > 0">
    <div class="list-box2" v-for="(item,index) in dataList" :key="index" @click="handleClick(item)">
      ………………………………………
    </div>
  </div>
  <div v-if="noData" style="margin-top:30%">
    <img src="@/common/imgs/no-data.png" alt="" style="width:100%">
  </div>
</van-list>

data() {
   return {
     dataList:[],
     current:1,
     size:10,
     loading: false, // 上拉加載 ?????? 
     finished: false, // 上拉加載完畢
     error: false, // 是否展示錯誤
     finishedText:"沒有更多了",
     noData:false, // 是否展示沒有數(shù)據(jù)的圖片
     // offset: 100 // 滾動條與底部距離小于 offset 時觸發(fā)load事件
   }
 },

 created() {
   // 調(diào)用列表查詢接口
   this.init(this.tab)
 },

methods:{
 init(val) {
   if(val === '1') {
     this.createList(1,10)
   } 
 },
   
//查詢接口
createList(current,size) {
  let param = { current:current, size:size }
  
  // 重點?。。。。。。。?！在這里將loading置為true
  ***this.loading = true;***

  createList(param).then(res=>{
    let that = this
    if(res.status == true) {
   	 //賦值
      const dataList = res.body.records
      const pages = res.body.pages
      // 如果返回數(shù)據(jù)為空
      if(dataList == null || dataList.length === 0) {
        that.finished = true
        that.finishedText = "沒發(fā)現(xiàn)任何東西，去其他地方逛逛吧～"
        that.noData = true
        return
      }
      // 加載狀態(tài)結束  可以寫在這里也可以寫在finally里面
      that.loading = false;
      
      // 根據(jù)當前頁進行數(shù)據(jù)處理
      if(that.current === 1) {
        that.dataList = dataList
      } else {
        that.dataList = that.dataList.concat(dataList)
      }

      // xxx?。?！最后一頁不足10條的情況 ，這樣寫實際有問題，因為如果是最后一頁為10條的情況，就會第二次去調(diào)用接口
      //if(dataList.length < that.size) {
       // that.finished = true
       //that.finishedText = '沒有更多了';
      //}

      // 使用這種！！ 證明已經(jīng)是最后一頁了
      if(that.current = pages) {
        that.finished = true
        that.finishedText = '沒有更多了';
      }
    }
  })
  .catch(err=>{this.error = true; })
  .finally(()=>{this.loading = false })
},

// 上拉刷新
 onLoad() {
   this.current+=1
   this.createList(this.current,this.size)
 },
}