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

谁借莪１个温暖的怀抱￠ 2022-12-01 14:27 103阅读 0赞

**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(); 				// 重新加载数据
        }
      }