van-list实现上拉刷新

206 阅读1分钟
 <ul>
          <van-list v-model="loading" loading-text="加载中..." :finished="finished" :immediate-check="false"
            @load="onLoad">
            <li v-for="(item ,inx) in tableData" :key="inx">
              <div class="my_left">
                <div class="my_list_msg">
                  <img :src="item.avatar?item.avatar:require('../../../assets/img/mylist.jpg')">
                </div>
                <div class="my_list_font">
                  <strong>{{item.nickName}}</strong>
                  <span>类型:{{item.platType==1?'抖音':item.platType==2?'头条':item.platType==3?'西瓜':item.platType==4?'西瓜树':item.platType==5?'百家号':item.platType==6?'哔哩哔哩':item.platType==7?'企鹅号':item.platType==8?'小红书':item.platType==10?'快手':''}}</span>
                </div>
              </div>
              <p @click="doDelete(item.id,inx,item)">删除</p>
            </li>
          </van-list>
        </ul>
        
 data() {
  return {
   
    params: {
      page: 1,
      pageSize: 10,
    },
    loading: false,
    finished: false,
    isFrist: 0,
    pageCount: 0,
  }
},        
        
        
         onLoad() {
    if (this.isFrist == 0) {
      return
    }
    console.log(this.isFrist)
    var that = this
    // 异步更新数据
    // setTimeout 仅做示例,真实场景中一般为 ajax 请求
    that.params.page += 1
    // setTimeout(() => {
    getAccount(that.params).then(response => {
      that.pageCount = response.data.pageCount
      for (let i = 0; i < response.data.data.length; i++) {
        that.tableData.push(response.data.data[i])
      }
      // 加载状态结束
      that.loading = false
      // 数据全部加载完成
      if (that.params.page === that.pageCount) {
        that.finished = true
      }
    })
  },
  loadData(params) {
    var that = this
    for (const key in params) {
      if (params[key] == '') {
        delete params[key]
      }
    }
    that.params.page = 1
    getAccount(params).then(response => {
      that.tableData = response.data.data
      that.pageCount = response.data.pageCount
      that.params.pageSize = 10
      // 数据全部加载完成
      if (that.params.page === that.pageCount) {
        that.finished = true
      }
      that.isFrist = 1;
    })
  },