Vue 使用Vant中list实现懒加载

Vant的初次使用

应用vant中list实现懒加载

首先npm 下载，使用的是需要什么导入什么

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

然后使用需要的组件，这儿用的是list，实现懒加载

然后使用指南创建 vant-list

<template>
  <div>
    <van-list
       <--查看api文档-->
      v-model="loading"
      :finished="finished"
      finished-text="wdnmd,没数据了别刷了"
      @load="onLoad"			
      :immediate-check ='false'   //这里记得加：是否在初始化时立即执行滚动位置检查 不加的话，开始页面就会直接判断滚动完成
    >
      <van-cell
        v-for="data in datalist"
        :key="data.filmId"
        @click="handleChangePage(data)"
      >
          <img :src="data.poster" alt="" />
          <p>{{ data.name }}</p>
          <p>主演:{{ data.actors | actorsFilter }}</p>
      </van-cell>
    </van-list>
  </div>
</template>

在js中引入vant

没使用全局，用到了什么就引入什么

import Vue from "vue";
//import axios from "axios";
import http from "@/util/http.js";
import { List, Cell } from "vant";

Vue.use(List).use(Cell);

将vant里面的参数进行初始化

data() {
    return {
      datalist: [],
      loading: false, //是否正在加载中，防止多次触发
      finished: false,
      current: 1, //记录第几页
      total: 0, //记录全部的数据
    };
  },

load	滚动条与底部距离小于 offset 时触发

通过这个事件可以判断最底部之后，我们需要执行的异步判断

1.ajax请求页面
2.合并新数据到老数据下面
3.让this.loading=false
4.判断请求到的所有数据是否等于总数，等于停止加载给this.finished=true

 onLoad() {
      // 1.ajax请求页面
      // 2.合并新数据到老数据下面
      // 3.让this.loading=false
     
      // 4.判断请求到的所有 数据是否等于总数，等于停止加载 给this.finished=true
      if (this.datalist.length === this.total) {
        this.finished = true;
        return;
      }
      this.current++;
      http({
        url: `/gateway?cityId=430100&pageNum=${this.current}&pageSize=10&type=1&k=5998332`,
        headers: {
          "X-Host": "mall.film-ticket.film.list",
        },
      }).then((res) => {
         //写法，将两个数组合并
        this.datalist = [...this.datalist, ...res.data.data.films];
          //因为到了最底部，load事情会将 loading变为true，但是数据没加载完，所以要重新改为false
        this.loading = false;
      });
    },
  },

需要看懂API文档，任重而道远，加油~~~