vant中list组件使用方法


<van-pull-refresh
  v-model="isRefreshLoading"
  success-text="刷新成功"
  @refresh="onRefresh"
>
<van-list
  v-if=List.length > 0"
  v-model="isListLoading"
  :finished="isListLoadFinished"
  loading-text="加载中..."
  finished-text="没有更多了"
  :immediate-check="false"
  @load="onListLoad"
  >
  </van-list>
</van-pull-refresh>

return {
  isRefreshLoading: false,
  isListLoading: false,
  isListLoadFinished: false,
}
getList() {
  getListApi({
    isShowLoading: this.pageNum === 1,
    pageNum: this.pageNum,
    pageSize: this.pageSize
  }).then(res => {
    this.list = this.list.concat(res.data);
    this.isListLoadFinished = this.list.length === (res.data.total - 0);
    this.pageNumr += 1;
    this.isListLoading = false;
    this.isShowList = this.list.length === 0;
  }).catch(err => {
    this.isListLoadFinished = true;
  })
},
onRefresh() {
  this.pageNum = 1;
  this.isRefreshLoading = false;
  this.list = [];
  this.getList ();
},
onListLoad() {
  setTimeout(() => {
    if (this.isListLoadFinished) {
      return
}
    this.getList ();
  }, 1000)
},


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM