滚动加载

src/components/FirstJob/joblist.vue

@@ -1,5 +1,6 @@
 <template>
-	<div class="joblist-container">
+	<div class="joblist-container"
+	>
 		<!-- 城市的弹出框 -->
 		<a-modal class="cityModal" transitionName v-model="visible" width="680px" @cancel="cityModalClose" title="请选择城市" :footer="null">
 			<div class="inputBox">
@@ -22,6 +23,7 @@
 				</li>
 			</ul>
 		</a-modal> 
+		<div class="main-page-obj">
 			<!-- 筛选导航 -->
 			<div class="navigation">
 				<div class="w" id="navigation">
@@ -480,7 +482,7 @@
 							</div>
 						</div>
 					</div>
-				<div class="pagecontainer f40">
+					<div class="pagecontainer f40" v-if="false">
 						<a-pagination :current="+formvalue.pageNum" :default-current="1" :defaultPageSize="8" :total="formvalue.total" @change="pageChange" />
 						<div class="ant-pagination-options-quick-jumper">
 							跳至
@@ -531,6 +533,7 @@
 					<recommend />
 				</div>
 			</div>
+		</div>
 		<recordModal :show.sync="recordShow" :jobDetail="currentInfo"></recordModal>
 	</div>
 </template>
@@ -589,6 +592,7 @@ export default {
 	// 组件状态值
 	data() {
 		return {
+			isFetching: false, // 标志位，防止重复加载
 			jobMainList: [], // 职位列表
       jobNum:0,
 			recordShow: false,
@@ -883,10 +887,12 @@ export default {
 	mounted() {
 		this.loginValue = localStorage.getItem("LOGIN_DATA") !== null ? JSON.parse(localStorage.getItem("LOGIN_DATA")) : { tel: "" };
 		console.log(this.loginValue);
+		window.addEventListener('scroll', this.handleScroll);
 	},
 	beforeDestroy() {
 		console.log("beforeDestroy");
 		// sessionStorage.removeItem("PAGE_TYPE")
+		window.removeEventListener('scroll', this.handleScroll);
 	},
 
 	destroyed() {
@@ -894,6 +900,29 @@ export default {
 	},
 	// 组件方法
 	methods: {
+		// ... 其他方法
+		handleScroll() {
+    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    const windowHeight = document.documentElement.clientHeight;
+    const scrollHeight = document.documentElement.scrollHeight;
+
+    if (scrollTop + windowHeight >= scrollHeight - 100 && !this.isFetching) { // 100 是一个阈值，可以根据需要调整
+      this.isFetching = true;
+      this.loadMoreData();
+    }
+  },
+  loadMoreData() {
+    this.formvalue.pageNum += 1; // 增加页码
+    if (this.signType != 0) {
+      this.getJobListYicai().then(() => {
+        this.isFetching = false;
+      });
+    } else {
+      this.getJobList().then(() => {
+        this.isFetching = false;
+      });
+    }
+  },
 		removePageInfo() {
 			sessionStorage.removeItem("PAGE_TYPE");
 		},
@@ -934,9 +963,8 @@ export default {
 			}
 			this.isspinning = false;
 		},
-		// 获取工作列表
 		async getJobList(newdata) {
-			this.isspinning = true;
+			// this.isspinning = true;
 			console.log("this.formvalue", this.formvalue);
 			try {
 				newdata = {
@@ -945,83 +973,61 @@ export default {
 					ageStr: "",
 					jobRequestLabelIds: "",
 					aliasName: "",
-					pageNum: 1,
+					pageNum: this.formvalue.pageNum, // 使用当前页码
 					pageSize: 8,
 					total: null, //分页配置
 				};
 				for (var k in this.formvalue) {
-					// console.log(this.formvalue[k]);
 					if (Array.isArray(this.formvalue[k])) {
 						newdata[k] = this.formvalue[k].length > 0 ? this.formvalue[k].join() : "";
 					} else {
 						newdata[k] = this.formvalue[k];
 					}
 				}
-				// console.log(newdata);
-				// debugger;
-				// console.log(this.isLogin);
 				if (this.isLogin) {
 					const { data } = await JobListApi(newdata);
-					console.log("data", data);
 					if (data.status === 200) {
-						this.jobMainList = disposeJobListData(data.data.recordList);
+						this.jobMainList = this.jobMainList.concat(disposeJobListData(data.data.recordList)); // 追加数据
 						this.formvalue.total = data.data.recordCount;
-						console.log(this.jobMainList);
 					} else {
 						this.$message.info("数据获取失败");
 					}
 				}
-				this.totop();
+				// this.totop();
-				//  = data.data.recordList;
-				// console.log(this.formvalue);
 			} catch (error) {
 				console.log(error);
 			}
 			this.isspinning = false;
 		},
-		async getJobNum() {
-			const { data } = await getJobNumApi();
-			this.jobNum = data.data;
-			console.log('getJobNum',data);
-		},
-		// 获取一才工作列表
 		async getJobListYicai(newdata) {
-			return;
+			// this.isspinning = true;
-			this.isspinning = true;
 			console.log(this.formvalue);
 			try {
 				let aId = "";
-
 				if (window.location.origin.indexOf("localhost:") > -1 || window.location.origin.indexOf("test.") > -1) {
 					aId = "2743";
 				} else {
 					aId = "3087";
 				}
-
 				newdata = {
-					agencyId: aId, //测试版
+					agencyId: aId,
 					recruitment: "1",
 					keys: "",
-					pageNum: 1,
+					pageNum: this.formvalue.pageNum, // 使用当前页码
 					pageSize: 8,
 					total: null, //分页配置
 				};
 				for (var k in this.formvalue) {
-					// console.log(this.formvalue[k]);
 					if (Array.isArray(this.formvalue[k])) {
 						newdata[k] = this.formvalue[k].length > 0 ? this.formvalue[k].join() : "";
 					} else {
 						newdata[k] = this.formvalue[k];
 					}
 				}
-				// console.log(newdata);
-				// debugger;
-				// console.log(this.isLogin);
 				if (this.isLogin) {
 					const { data } = await JobListApiYicai(newdata);
-					// console.log(data);
 					if (data.status === 200) {
-						this.jobMainList = disposeJobListData(data.data.recordList);
+						this.jobMainList = this.jobMainList.concat(disposeJobListData(data.data.recordList)); // 追加数据
 						this.jobMainList.forEach((item, index) => {
 							if (item.jobType == 2) {
 								item["servetype"] = setReturnFee(item.agencyReturnFee, item.agencyReturnFeeType);
@@ -1030,19 +1036,21 @@ export default {
 							}
 						});
 						this.formvalue.total = data.data.recordCount;
-						console.log(this.jobMainList);
 					} else {
 						this.$message.info("数据获取失败");
 					}
 				}
-				this.totop();
+				// this.totop();
-				//  = data.data.recordList;
-				// console.log(this.formvalue);
 			} catch (error) {
 				console.log(error);
 			}
 			this.isspinning = false;
 		},
+		async getJobNum() {
+			const { data } = await getJobNumApi();
+			this.jobNum = data.data;
+			console.log('getJobNum',data);
+		},
 
 		//搜索企业名称
 		onSearch() {
@@ -1404,8 +1412,8 @@ export default {
 		},
 		totop() {
 			// console.log(window);
-			document.body.scrollTop = 0;
+			// document.body.scrollTop = 0;
-			document.documentElement.scrollTop = 0;
+			// document.documentElement.scrollTop = 0;
 			// window.body.scrollY = 0;
 		},
 		moneyToFixed(value) {

src/views/main.vue

@@ -705,7 +705,7 @@ export default {
 		showfooter() {
 			const path = this.$route.fullPath;
 
-			if (path.indexOf("main") > -1) {
+			if (path.indexOf("main") > -1 || this.pagrTitle == 'list') {
 				this.isbannershow = false;
 				this.isfootershow = false;
 			} else {