vue项目结合vant，实现上拉加载更多，下拉刷新_vant 上拉加载更多

上拉加载思路：

1. 引入vant 组件 上拉list
2. 后端数据做了分页处理，获取接口数据，渲染到页面上,(此处只会显示一页的数据)
3. 设置属性去实现效果，loading,finished为vant组件中提供的
4. 每次滚动到底部后把页面数+1，发送一次请求获取新分页数据.
5. 获取完数据，将新获取的数据跟上一页获取的数据做一个合并
6. 判断加载完毕，数据的长度小于1，则finished设置为true,表示所有数据加载完毕**
   代码：

      <!-- 上拉加载 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 下拉刷新 -->
        <van-pull-refresh
          v-model="isLoading"
          success-text="刷新成功"
          @refresh="onRefresh"
        >
          <!-- 内容 -->
          <ul >
            <li v-for="item in prolist" 
            :key="item.proId" 
            class="commin-box" 
            @click="godetail(item.proId)">
              <img :src="item.img" />
              <p class="proName">{{ item.proName }}</p>
              <p class="price">￥ {{ item.price }}</p>
            </li>
          </ul>
        </van-pull-refresh>
      </van-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

上拉加载：
初始设置loading 为true，数据加载成功，设置为false。所有数据加载完设置 finished为false(loading,finished为vant组件中提供的)判断数据加载完毕：数据的长度小于1 则判断数据加载完毕，

  onLoad() {
      // 开始异步请求数据
      this.loading = true;
      // 本次数据更新成功后，将loading设置为false
      getpro({
        num: this.num,  //num，一页获取多少个
        index: this.index++,   //index初始为0，页码
      }).then((data) => {
        this.loading = false;
        this.prolist = [...this.prolist, ...data.data.msg]; // 上一页数据跟新加载的数据做合并
        // 判断数据是否加载完毕
        if (data.data.msg.length < 1) {
          // 将finished设置为true,表示所有数据加载完毕
          this.finished = true;
        }
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

下拉刷新思路

1. 引入vant 组件 下拉 PullRefresh
2. 设置相对应属性，(vant中有提示)
3. 相当于重新加载一遍数据
4. 请求成功后覆盖重新渲染的数据，isLoading设置为false表示加载完毕，将页码初始化，设置为05.bug:原先老数据未被清除，新数据直接覆盖，内容中key值相同，组件被复用了，** 解决：刷新这个路由 this.$router.go(0)

代码：

   // 下拉刷新
    onRefresh() {
      getpro({
        num: this.num,
        index: this.index,
      }).then((data) => {
        this.prolist = data.data.msg;
        this.isLoading = false;
        this.index = 0; //页码也需要初始化
        this.finished = false //
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12

作者：王雅楠