目录

1.上拉加载

2.下拉刷新

3.上拉加载和下拉刷新的同步使用

4.props API

---

 1.上拉加载

<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list>

export default {
  data() {
    return {
      list:[],
      loading: true,
      finished: false
    }
  },
methods: {
    onLoad() {
      // 异步更新数据
      // 一个axios请求函数
      const {data:res} = await initList(){}

      //将数据储存在数组后方
      this.list = [...this.list,...res]

      // 加载状态结束
      this.loading = false

      //如果请求的数据为空
      if (res.length === 0) {
        this.finished = true
      }
  },
};

其中，loading是一个布尔值，其代表的是加载的状态，当我们开始加载，其值从false改为true，当请求结束，其值从true改为false。

同样的，finish也是一个布尔值，其代表的是数据是否已完全加载，若数据全部加载完毕，没有新的数据可供请求，finished的值转为true。

finished-text的值为当已全部加载时的提示语。

注意：当loading默认值为flase，在页面刚加载好时会自动触发一次onLoad事件，当默认值为true时则不会触发。

2.上拉刷新

<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-cell v-for="item in list" :key="item" :title="item" />
</van-pull-refresh>

export default {
  data() {
    return {
      list:[],
      Loading: false,
      finished: false
    }
  },
  methods: {
    onRefresh() {
      // 异步更新数据
      // 一个axios请求函数
      const {data:res} = await initList(){}

      //将数据储存在数组前方
      this.list = [...res,...this.list]

      // 加载状态结束
      this.loading = false

      //如果请求的数据为空
      if (res.length === 0) {
        this.finished = true
      }
  }
};

其中，loading是一个布尔值，其代表的是刷新的状态，当我们开始刷新，其值从false改为true，当刷新结束，其值从true改为false。

同样的，finish也是一个布尔值，其代表的是数据是否已完全加载，若数据全部加载完毕，没有新的数据可供请求，finished的值转为true。

3.上拉加载和下拉刷新的同步使用

<van-pull-refresh v-model="refreshing" @refresh="onRefresh" :disabled='finished'>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item" :title="item" />
  </van-list>
</van-pull-refresh>

export default {
  data() {
    return {
      list: [],
      loading: true,
      finished: false,
      refreshing: false,
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // 一个axios请求函数
      const {data:res} = await initList(){}

      //将数据储存在数组后方
      this.list = [...this.list，...res]

      // 加载状态结束
      this.loading = false

      //如果请求的数据为空
      if (res.length === 0) {
        this.finished = true
    },
    onRefresh() {
      // 异步更新数据
      // 一个axios请求函数
      const {data:res} = await initList(){}

      //将数据储存在数组前方
      this.list = [...res,...this.list]

      // 加载状态结束
      this.refreshing = false

      //如果请求的数据为空
      if (res.length === 0) {
        this.finished = true
    }
  }
};

注意：在<van-pull-refresh>标签中我们添加了vant官方其自带的disable属性，其作用是是否禁用下拉刷新功能，当我们的数据已全部请求完毕即finished === true时，下拉刷新则不可用。

4.props API

这里将列举出vant官方提供的propsAPI

• List列表（上拉加载）

  参数	说明	类型	默认值
  v-model	是否处于加载状态，加载过程中不触发load事件	boolean	false
  finished	是否已加载完成，加载完成后不再触发load事件	boolean	false
  error	是否加载失败，加载失败后点击错误提示可以重新 触发load事件，必须使用sync修饰符	boolean	false
  offset	滚动条与底部距离小于 offset 时触发load事件	number | string	300
  loading-text	加载过程中的提示文案	string	加载中...
  finished-text	加载完成后的提示文案	string	-
  error-text	加载失败后的提示文案	string	-
  immediate-check	是否在初始化时立即执行滚动位置检查	boolean	true
  direction	滚动触发加载的方向，可选值为up	string	down

• PullRefresh（下拉刷新）

  参数	说明	类型	默认值
  v-model	是否处于加载中状态	boolean	-
  pulling-text	下拉过程提示文案	string	下拉即可刷新...
  loosing-text	释放过程提示文案	string	释放即可刷新...
  loading-text	加载过程提示文案	string	加载中...
  success-text	刷新成功提示文案	string	-
  success-duration	刷新成功提示展示时长(ms)	number | string	500
  animation-duration	动画时长	number | string	300
  head-height	顶部内容高度	number | string	50
  pull-distance v2.12.8	触发下拉刷新的距离	number | string	与 head-height 一致
  disabled	是否禁用下拉刷新	boolean	false