在线论坛,下拉加载更多,在线论坛详情/在线论坛首页/路由配置摘除

src/views/forum/detail.vue

@@ -1,5 +1,5 @@
 <template>
-	<div style="display: flex; justify-content: center">
+	<div style="display: flex; justify-content: center" class="main-content-wrapper">
 		<div style="width: 1200px">
 			<a-card>
 				<div style="display: flex; justify-content: space-between">

src/views/forum/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div style="display: flex; justify-content: center">
+	<div style="display: flex; justify-content: center" class="main-content-wrapper">
 		<a-card :bordered="false" style="width: 1200px" class="formMount">
 			<a-space>
 				<a-input-search
@@ -33,7 +33,15 @@
 					创建新主题
 				</a-button>
 			</a-space>
-			<s-table ref="table" :columns="columns" :data="loadData" :row-key="(record) => record.id" :custom-row="customRow">
+			<a-table
+				ref="table"
+				class="mt-2"
+				:columns="columns"
+				:dataSource="tableData"
+				:row-key="(record) => record.id"
+				:custom-row="customRow"
+				:pagination="false"
+			>
 				<template #bodyCell="{ column, record }">
 					<template v-if="column.dataIndex === 'postTitle'">
 						<div class="forum-list-title">{{ record.postTitle }}</div>
@@ -49,8 +57,9 @@
 						<div>{{ formatDateTime(record.lastReplyTime) }}</div>
 					</template>
 				</template>
-			</s-table>
-			<Form ref="formRef" @successful="table.refresh(true)" />
+			</a-table>
+			<div style="text-align: center; cursor: pointer" class="mt-2" @click="moreList">{{ moreText }}</div>
+			<Form ref="formRef" @successful="loadData(pagination.value)" />
 		</a-card>
 	</div>
 </template>
@@ -116,7 +125,7 @@
 			title: '最后回复人',
 			dataIndex: 'lastReplyUserAvatar',
 			align: 'center',
-			width: 100
+			width: 120
 		},
 		{
 			title: '回复量',
@@ -142,7 +151,7 @@
 	const handleChange = (value) => {
 		exType.value = false
 		searchFormState.typeId = value
-		table.value.refresh(true)
+		loadData(pagination.value)
 	}
 	const filterOption = (input, option) => {
 		return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
@@ -154,7 +163,7 @@
 	// 查询
 	const onSearch = () => {
 		exType.value = false
-		table.value.refresh(true)
+		loadData(pagination.value)
 	}
 	function customRow(record) {
 		return {
@@ -184,55 +193,106 @@
 	getTypeList()
 
 	const exType = ref(false)
-
-	const loadData = (parameter) => {
+	const tableData = ref([])
+	const tableTotal = ref(0)
+	const loadData = (parameter, a) => {
 		if (exType.value) {
 			let postExtend = moduleTypeList.value.filter((r) => r.id == searchFormState.sortOrder)[0]?.state
 			return forumApi.moreList(Object.assign(parameter, { postExtend: postExtend })).then((data) => {
-				if (data) {
-					return data
+				tableTotal.value = data.total
+				if (a) {
+					tableData.value = Object.assign(tableData.value, data.records)
 				} else {
-					return []
+					if (data) {
+						tableData.value = data.records
+					} else {
+						tableData.value = []
+					}
 				}
 			})
 		} else {
 			return forumApi.forumList(Object.assign(parameter, searchFormState)).then((data) => {
-				if (data) {
-					return data
+				tableTotal.value = data.total
+				if (a) {
+					tableData.value = tableData.value.concat(data.records)
 				} else {
-					return []
+					if (data) {
+						tableData.value = data.records
+					} else {
+						tableData.value = []
+					}
 				}
 			})
 		}
 	}
+	const pagination = ref({
+		current: 1,
+		size: 10
+	})
+	loadData(pagination.value)
 	// 切换应用标签查询菜单列表
 	const moduleClock = (value, t) => {
 		exType.value = false
 		searchFormState.sortOrder = value
+		pagination.value.current = 1
+		moreText.value = '加载更多'
 		if (t == 2) {
 			exType.value = true
 		}
-		table.value.refresh(true)
+		loadData(pagination.value)
 	}
-	// 触底函数
-	const onReachBottom = () => {
-		window.addEventListener('scroll', onBottom())
+	const moreText = ref()
+
+	const moreList = () => {
+		if (tableTotal.value > pagination.value.current * pagination.value.size) {
+			pagination.value.current += 1
+			loadData(pagination.value, 1)
+			moreText.value = '加载更多'
+		} else {
+			moreText.value = '全部加载完成'
+		}
 	}
-	// 触底相应函数
-	const onBottom = () => {
-		// 获取可视高度
-		let clientHeight = document.documentElement.clientHeight
-		// 获取滚动高度
-		let scrollTop = document.documentElement.scrollTop
-		// 滚动条高度
-		let scrollHeight = document.documentElement.scrollHeight
-		if (clientHeight + scrollTop + 180 > scrollHeight) {
-			console.log('触底了')
+	// 定义滚动函数
+	const handleScroll = () => {
+		const tableContainer = window.document.querySelector('.main-content-wrapper')
+		const scrollPosition = tableContainer.scrollTop
+		const isTop = scrollPosition === 0
+		const isBottom = tableContainer.scrollHeight - scrollPosition - 20 < tableContainer.clientHeight
+		if (isTop) {
+			// pagination.value.current = 1
+			// loadData(pagination.value);
+			console.log('重新加载')
+		}
+		if (isBottom) {
+			if (tableTotal.value > pagination.value.current * pagination.value.size) {
+				pagination.value.current += 1
+				loadData(pagination.value, 1)
+				moreText.value = '加载更多'
+			} else {
+				moreText.value = '全部加载完成'
+			}
+			console.log('加载更多')
 		}
 	}
-	onReachBottom()
+
+	// 添加scroll监听
+	onMounted(() => {
+		nextTick(() => {
+			if (table.value) {
+				const tableContainer = window.document.querySelector('.main-content-wrapper')
+				tableContainer.addEventListener('scroll', handleScroll)
+			}
+		})
+	})
+
+	// 移除scroll监听
 	onBeforeUnmount(() => {
-		window.removeEventListener('mousemove', onBottom())
+		nextTick(() => {
+			if (table.value) {
+				const tableContainer = window.document.querySelector('.main-content-wrapper')
+				tableContainer.removeEventListener('scroll', handleScroll)
+			}
+		})
 	})
 </script>
 <style scoped>