vant中list列表组件使用(附详细注释)

矫情吗；* 2023-07-13 13:55 11阅读 0赞

### vant中list列表组件使用 ###

**html:**

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

**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组件简单使用完成.