要件: スクロール バー プルダウン、ページング リクエスト リスト データ。
実装方法 1:
プロジェクトで使用する場合はelement-plus、コンポーネントを使用して直接実装できますInfinite Scroll。
スクロール読み込みを実装するリストに追加しv-infinite-scroll、対応する読み込みメソッドを割り当てると、一番下までスクロールしたときに読み込みメソッドが自動的に実行されます。
コードは以下のように表示されます:
<template>
<ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
<li v-for="i in count" :key="i" class="infinite-list-item">{
{
i }}</li>
</ul>
</template>
<script lang="ts" setup>
import {
ref } from 'vue'
const count = ref(0)
const load = () => {
count.value += 2
}
</script>
実装方法 2:
1.srcディレクトリ内に新しいフォルダーhooks(ファイルの保存に使用hook) を作成し、hooksその下にuse-lazy-data.js(ts を使用する場合は、接尾辞 ts を使用します)、次のコードを記述します。
import {
useIntersectionObserver } from '@vueuse/core';
import {
ref } from 'vue';
// 数据懒加载函数
export const useLazyData = () => {
const target = ref(null);
const isLazy = ref(false);
const {
stop } = useIntersectionObserver(target, ([{
isIntersecting }]) => {
if (isIntersecting) {
// stop(); //不注释代码，函数只能触发一次
isLazy.value = true;
}
});
return {
target,
isLazy,
};
};
2. 使用する必要がある vue ファイルに以下を導入します。
<template>
<div class="content_box">
<div v-for="(a, index) in templateList" :key="index">列表数据</div>
<div v-if="templateList.length >= pageSize" ref="target"></div>
</div>
</template>
<script setup>
import {
ref, watch, onMounted } from "vue";
import {
digitalTemplate } from "@/api/api";
import {
useLazyData } from "../../hooks/use-lazy-data";
let templateList = ref([]) //列表数据
let pageNum = ref(1); //当前页数
let pageSize = ref(20); //每页请求数据个数
let totalCount = ref(0); //数据总数
// 滚动条滚动时懒加载列表
const {
target, isLazy } = useLazyData();
watch(
() => isLazy.value,
() => {
if (isLazy.value) {
//如果触发了懒加载，调用函数更新增加list列表数据。根据自己业务写代码逻辑
if (templateList.value.length >= totalCount.value) {
return;
}
pageNum.value = pageNum.value + 1;
getTemplateList();
isLazy.value = false;
}
}
);
// 获取数据列表
function getTemplateList() {
let data = {
pageNum: pageNum.value,
pageSize: pageSize.value,
};
//请求接口
digitalTemplate(data).then((res) => {
if (res.data.list && res.data.list.length > 0) {
totalCount.value = res.data.pageInfo.totalCount;
if (pageNum.value == 1) {
templateList.value = res.data.list;
} else {
templateList.value = templateList.value.concat(res.data.list);
}
} else if (pageNum.value == 1) {
console.log("暂无数据");
}
});
}
onMounted(async () => {
getTemplateList();
});
</script>
知らせ：
ブラウザがそれをロードしない場合ref=target、divjs ファイル内の関数はトリガーされませんuseIntersectionObserver。
スクロール バーが引き下げられ、ブラウザーがターゲット div を表示すると、関数がトリガーされ、isLazy の値が変更されます。また、isLazy プロパティも監視しています。変更が検出されると、たとえば、スクロール バーが変更されます
。新しいデータを受信すると、「データ更新関数」がトリガーされ、新しいリスト データを取得するためにインターフェイスが再度呼び出されます。
一度だけトリガーしたい場合は、js ファイル内のコメントを削除してくださいstop()。
参考ブログ：https://blog.csdn.net/wnk1997/article/details/128954370