日常开发

src/views/score/index.vue

@@ -23,7 +23,7 @@
             <div class="li"> 报告 </div>
           </div>
           <div class="list">
-            <div ref="scrollRef" @scroll="getNext" class="scrollBox">
+            <div ref="reportScrollRef" @scroll="getNext($event)" class="scrollBox">
               <div class="ul" v-for="(item, index) in reportList" :key="index">
                 <div class="li"> {{ item.title }} </div>
                 <div class="li"> {{ item.result }} </div>
@@ -41,7 +41,7 @@
 <script setup lang="ts">
 import dayjs from 'dayjs';
 import dataDictionary from '@/utils/dataDictionary';
-const scrollRef = ref();
+const reportScrollRef = ref();
 const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
 const route = useRoute();
@@ -65,9 +65,10 @@ const data = reactive<any>({
   },],
   project: '',
   date: "",
+  debounceTime: '', //防抖状态
 });
 
-const { parameter, reportList, page, projectList, project, date } = toRefs(data);
+const { parameter, reportList, page, projectList, project, date, debounceTime } = toRefs(data);
 
 //筛选日期
 const bindDateChange = (e: any) => {
@@ -165,12 +166,28 @@ const openReport = (data: any) => {
 };
 
 //下一页
-const getNext = () => {
+const getNext = (event?: any) => {
   if (page.value.current == page.value.pages) {
     return false;
   }
-  page.value.current++;
-  getReportList();
+  let obj = event.target;
+  let scrollHeight = obj.scrollHeight;
+  let scrollTop = obj.scrollTop;
+  let clientHeight = obj.clientHeight;
+  //提前100高度加载数据
+  if (scrollTop + clientHeight + 150 >= scrollHeight) {
+    console.log('到底了!');
+    //继续加载下一页
+    if (debounceTime.value) {
+      clearTimeout(debounceTime.value);
+    }
+    debounceTime.value = setTimeout(() => {
+      page.value.current++;
+      getReportList();
+    }, 500);
+  } else {
+    console.log('没到底');
+  }
 };
 
 //计算页码
@@ -199,7 +216,7 @@ onMounted(() => {
 
 });
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .result {
   min-height: 100vh;
 }
@@ -225,7 +242,7 @@ onMounted(() => {
   width: 100%;
   height: 12vh;
   background-color: #b0ffac;
-  background-image: url("~@/static/images/home/btnbg2.png");
+  background-image: url("@/assets/images/common/btnbg2.png");
   background-size: 100% 100%;
   background-repeat: repeat;
   display: flex;
@@ -359,7 +376,7 @@ onMounted(() => {
   color: #fff;
   font-size: 2.2vh;
   margin: 0 auto;
-  background: url("~@/static/images/train/areabg2.png") center center repeat-y;
+  background: url("@/assets/images/common/areabg2.png") center center repeat-y;
   background-size: 100% 100%;
   border-radius: 2.1vh;
   box-shadow: 0px 0px 15px #ffffff80;