vant-ui中list列表组件的使用

html

<van-list 
	v-model="loading" 	                     		 // 是否显示正在加载状态
	:finished="finished" 							 // 是否已经加载完成
	finished-text="没有更多了"						 // 加载完成提示文案
	@load="onLoad" 									 // 滚动条与底部距离offset时触发事件
	offset="300"									 // 滚动条与底部距离offset时触发@load(默认300)
	:error.sync="error" 							 // 是否显示加载失败状态
	error-text="请求失败，点击重新加载"					 // 加载失败提示文案
	>
	// 循环列表数据
        <van-cell v-for="item in list" :key="item" :title="item.title" />

</van-list>  

data

data() {
    return {
     loading: false, 		// 是否处在加载状态
      finished: false, 		// 是否已加载完成
      error: false, 		// 是否加载失败
      list: [],				// 列表
      page: 1,				// 分页
      type:"pop",			// 每页条数
      total: 0				// 数据总条数
 
    }
  },

methods

 methods: {
    // 获取列表数据方法
    async getList() {
      let res= await getTypeList({ 
          page: this.page,
          type: this.type,
      })
      console.log(res.data.list)

      if (res.data.list === 0) {  		// 判断获取数据条数若等于0
        this.list = [];				// 清空数组
        this.finished = true;		// 停止加载
      }
      // 若数据条数不等于0
      this.total = res.data.total;		// 给数据条数赋值
      this.list.push(...res.data.list)	// 将数据放入list中
      this.loading = false;			// 加载状态结束 
      // 如果list长度大于等于总数据条数,数据全部加载完成
      console.log(this.list)
      if (this.list.length >= res.data.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(); 				// 重新加载数据
    }
  }