关于vue上拉加载下拉刷新的问题

关于vue上拉加载下拉刷新的问题

我们在使用vant组件使用list列表和PullRefresh下拉刷新的时候，可以组合起来使用上拉加载，下拉刷新这个一个特性

• 我们在组件中的代码应该这样写,首先PullRefresh的标签在最外面，然后list列表的标签在里面

  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="this.onLoad"
      >
        <van-cell v-for="item in list" :key="item.consultation_id">
          <order-item :item="item"></order-item>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  

• 介绍一下van-pull-refresh的几个属性 和方法，van-pull-refresh中的 isloading 和refresh这个方法

1. isloading这个属性是 是否在加载中，如果加载完成的话，我们让它置为false
2. refresh这个方法使我们在下来刷新的时候的回调函数

• 然后是van-list中的loading 和finished和load方法

3. List 组件通过loading和finished两个变量控制加载状态，当组件滚动到底部时，会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false即可。若数据已全部加载完毕，则直接将finished设置成true即可
4. load方法 就是加载的过程

loading 和 finished 分别是什么含义？

• List有以下三种状态，理解这些状态有助于你正确地使用List组件：
  非加载中，loading为false，此时会根据列表滚动位置判断是否触发load事件（列表内容不足一屏幕时，会直接触发）
• 加载中，loading为true，表示正在发送异步请求，此时不会触发load事件
• 加载完成，finished为true，此时不会触发load事件
  在每次请求完毕后，需要手动将loading设置为false，表示加载结束

在项目中使用下拉刷新上拉加载的过程

• 首先后端设计好，每页的请求个数和页数。我之前碰到的刷新和加载的这个情况下，请求后端的数据时，需要假如请求的页数和一页的数据个数。
• 我们在load这个加载函数中，首先就是发送请求获得我们的数据。然后做回调函数，我们在回调函数中，把数据填入list列表中。在每一页的请求后，数据填充过后，我们需要把loading设置为false（这个是加载状态）,然后把页数加一。然后判断是否全部数据加载完毕。如果数据全部加载完毕的时候，我们需要把页数调为最初的那个页数，根据后台定义的第一次请求的页数是0或者是1，然后还需要设置数据加载完毕的状态（finished = true）
• onRefresh（下拉函数），这个函数中我们需要重新加载数据。首先我们需要清空list列表里面的数据，然后设置一些参数 如 loading finished isloading这三个参数
• 我觉得在使用这个功能的时候，注意状态的改变，以及参数的设置。

根据我自己的demo，总结一下这几个参数的设置

• 首先在data里面的五个参数分别为下面

  data() {
      return {
        count: 0,
        list: [],
        isLoading: false,
        loading: false,
        finished: false,
        page:1,
        per:5
      };
    }
  

• 然后是onLoad这个方法中的代码以及参数问题

	this.$store
        .dispatch({
          type: 'xxxx', // 请求的方法，在vuex中
          payload: { // 接口所需参数
            page: this.page, // 页数
            per: this.per // 每页个数
          }
        })
        .then(data => {
          console.log(data);
          this.count = data.count; // 后台返回的数据的总个数
          for (let i = 0; i < data.items.length; i++) {
            this.list.push(data.items[i]); // 每一页的数据，放进list中
          }
          // 然后每一页加载完成后，设置this.loading = false;表示加载结束
          this.loading = false;
          this.page++; // 页数加一
          if (this.list.length >= this.count) { // 判断list是不是和count相等，相等就是数据加载完
            this.finished = true; // 设置finished 为true，表示数据加载完毕
            this.page = 1; // 调整页数
          }
        })
        .catch(err=>{
          console.log(err);
        })

• onRefresh（）方法中的参数问题

	this.list = []; // 清空数据
	this.page = 1; //设置页数为1
	this.loading = true; //设置当页加载未完毕
	this.finished = false; //设置数据没有加载完
	this.onLoad('replace');
	this.$toast('刷新成功');
	this.isLoading = false; //isloading这个属性是 是否在加载中，如果加载完成的话，我们让它置为false