Auto Commit

src/components/scrollDemo/index.vue

+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { notification } from 'ant-design-vue'
+const scrollRef = ref()
+type ListDataType = { label: string, value: string }
+// 初始化数据
+const initData = (): ListDataType[] => {
+    const data: ListDataType[] = [];
+    for (let i = 1; i < 50; ++i) {
+        data.push({
+            label: `label${i}`,
+            value: `label${i}`,
+        })
+    }
+    return data
+};
+// state 
+const state: any = reactive({
+    listData: initData()
+})
+
+// 重置
+const resetData = () => {
+    state.listData = initData()
+};
+
+//追加数据
+const appendData = () => {
+    const data: any = [];
+    const length = state.listData.length
+    for (let i = length + 1; i < 10 + length; ++i) {
+        data.push({
+            label: `label${i}`,
+            value: `label${i}`,
+        })
+    }
+    state.listData = [...state.listData, ...data]
+}
+//滚动事件
+const scrollEvent = (e: any) => {
+    console.log('e', e)
+    // 不使用滚动条的情况下为了适应视口中所用内容所需的最小高度
+    const scrollHeight = e.target.scrollHeight
+    // 从其顶部边缘滚动的像素数
+    const scrollTop = e.target.scrollTop
+    // dom 视口高度（不包含任何滚动条）
+    const clientHeight = e.target.clientHeight
+    console.log('scrollTop', scrollTop)
+    console.log('clientHeight', clientHeight)
+    console.log('scrollHeight', scrollHeight)
+    // 向上取整
+    if (Math.ceil(scrollTop + clientHeight + 1) >= scrollHeight) {
+        notification.open({
+            message: '到底啦！',
+        })
+        appendData()
+    }
+}
+//监听 dom滚动
+const listenDomScroll = () => {
+    try {
+        if (scrollRef.value) {
+            //@ts-ignore
+            scrollRef.value.removeEventListener('scroll', scrollEvent)
+            scrollRef.value.addEventListener('scroll', scrollEvent)
+        }
+    }
+    catch (e) {
+        console.error(e)
+    }
+};
+
+
+// 初始化页面
+onMounted(() => {
+    listenDomScroll()
+})
+
+</script>
+<template>
+    <div>
+        <a-button type="primary" @click="resetData">重置</a-button>
+        <div style="max-height:300px;overflow-y:auto;width:200px" ref="scrollRef">
+            <div v-for="item in state.listData" :key="item.value"
+                style="background:#0052d9;color:#fff;padding:2px;margin:2px;">
+                {{ item.label }}
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file

src/router/modules/layout.js

@@ -102,6 +102,16 @@ export default {
                 icon: 'ion:grid-outline',
                 title: '可视化排序',
             },
+        },
+        {
+            path: 'scrollDemo',
+            name: 'scrollDemo',
+            component: () => import('@/components/scrollDemo/index.vue'),
+            meta: {
+
+                icon: 'ion:grid-outline',
+                title: '滚动加载',
+            },
         }
     ],
 };