上拉加载更多:

1. 上拉加载更多,就是手指向上滑动,加载更多内容,放在底部,类似于pc端分页的效果 (使用的是vant-list组件)
2. 下拉刷新加载最新内容,就是手指向下拉动,获取最新内容,放在头部 (使用的是van-pull-refresh组件)
(注意: 这两种效果vant组件里面提供给我们了)

3. 以下就是学习步骤 :
3.1 去vant官网上面复制 :

  1. // 1. 引入 : 省略引入部分(全局或者局部都是按需的)
  2. // 2. 粘贴复制代码:
  3. <template>
  4.    <van-list
  5.        v-model="loading"  // 是双向数据绑定,绑定的是loading的加载状态(初始值为false)
  6.        :finished="finished"
  7.        finished-text="没有更多了"
  8.        @load="onLoad">  // 绑定了一个load事件(回调函数)
  9.       <van-cell v-for="item in list" :key="item" :title="item" />
  10.    </van-list>
  11. </template>
  12. export default {
  13.   data() {
  14.     return {
  15.       list: [], // 数据项
  16.       loading: false, // 是否正在加载...
  17.       finished: false, // 是否所有的数据全部加载完成:没有更多了...
  18.     };
  19.   },
  20.   methods: {
  21.     onLoad() {
  22.       // 先发送请求获取数据  省略...
  23.       // 1. 把数据追加到list中（list的内容会越来越多）push()
  24.       // 2. 在每次请求完毕之后,把loading手动设置为false,表示本次加载结束
  25.       // 3.  判断是否所有的数据已经加载完成，如果是，则把finished设为true,此时将再也不会触发load事件
  27.       以下代码可以删了 做示例用的
  28.       // 异步更新数据
  29.       // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  30.       setTimeout(() => {  // 伪代码
  31.         for (let i = 0; i < 10; i++) {
  32.           this.list.push(this.list.length + 1);
  33.         }
  35.         // 加载状态结束
  36.         this.loading = false;
  38.         // 数据全部加载完成
  39.         if (this.list.length >= 40) {
  40.           this.finished = true;
  41.         }
  42.       }, 1000);
  43.     },
  44.   },
  45. };
  47. // van-list 相当于是ul , 则van-cell相当于是li


3.2 说明: vant-list 自带上拉加载更多的效果 (数据加载机制)

原理 :

1）数据项在list中

2）在显示数据时，如果当前的数据不足一屏，它会 自动触发load事件，并执行对应的回调

onLoad去加载数据 (在onload中，通过ajax取回新数据)

在onLoad里面要做的事情就是一下3点:

  1.               -- 把数据追加到list中（list的内容会越来越多）<br />                  -- 在每次请求完毕之后,把loading手动设置为false,表示本次加载结束<br />                  -- 判断是否所有的数据已经加载完成，如果是，则把finished设为true,此时将再也不会触发load事件

3) 如果手动向上拉，且finished不为true, 也会去调用onLoad

下拉刷新:

  1. <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  3.     // 你的内容! 只要被van-refresh包起来,就具备下拉刷新的效果
  5. </van-pull-refresh>  
  7. export default {
  8.   data() {
  9.     return {
  10.       省略其他...
  11.      isLoading = false // 是否正在下拉刷新
  12.     }
  13.   },
  14.   methods:{
  15.    // 下拉刷新,去获取最新的数据,添加到列表中
  16.    async onRefresh () {
  17.       // 先发送请求获取数据  省略...
  18.       // 1. 把数据追加到list的头部 unshift()
  19.       // 2. 在每次请求完毕之后,把isLoading手动设置为false,表示本次加载结束
  20.       // 3. 判断是否所有的数据已经加载完成，如果是，则把finished设为true,此时将再也不会触发load事件
  21.    }
  22.   }
  23. }