Vue 使用Vant中list實現懶加載

Vant的初次使用

應用vant中list實現懶加載

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文檔，任重而道遠，加油~~~