上下翻页调接口

src/views/IM/search-message/detail.vue

 
 <template>
-	<!--  v-infinite-scroll="getDeatailData(0)" -->
+	<!--  v-infinite-scroll="getDeatailData(0)" getHistoryData(0)-->
   <div class="search-msg-detail">
     <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :jumPathThird="jumPathThird"></bread-crumb>
     <div class="detail-content">
-		<div v-loadmore="getHistoryData(0)">
-			<div id="screenSet" class="message-content scroll-box">
+		<div id="scroll-set">
 			<div v-for="(item, index) in detailData" :key="index">
 				<div class="split-line" v-if="item.sessionFlag">本次会话结束</div>
-					<div class="msg-container" :class="{'has-line': !item.sessionFlag}">
-						<div class="msg-item-img" v-if="item.content.bizType != -1">
+				<div v-if="item.content.bizType != -1" class="msg-container" :class="{'has-line': !item.sessionFlag}">
+					<div class="msg-item-img">
 						<img v-if="item.fromAccId == picakfAccId" src="../../../assets/image/IM/kf-avatar.png" alt />
 						<img v-else :src="userAvatar" />
 					</div>
 					<div class="msg-content">
-							<div class="info" v-if="item.content.bizType != -1">
+						<div class="info">
 							<span v-if="item.fromAccId == picakfAccId">客服</span>
 							<span v-else>{{userName}}</span>
 							<span class="mid-time">{{item.timestamp}}</span>	
@@ -51,7 +50,6 @@
 		</div>	
     </div>
   </div>
-  </div>
 </template>
 <script>
 import BreadCrumb from "@/components/breadcrumb.vue";
@@ -72,7 +70,7 @@ export default {
 			picakfAccId: '',
 			lastMsgTime: '',
 			doctorAccId: '',
-			detailData: {},
+			detailData: [],
 			userAvatar: '',
 			userName: '',
 			scroll: true,
@@ -92,18 +90,34 @@ export default {
 		this.picakfAccId = getPicaKFAccid();
 	},
 	mounted() {
+		this.getDeatailData(1);
 		let _this = this;
-		this.$nextTick(() => {
+		setTimeout(() => {
+			let el = _this.getElmByID('scroll-set');
 			_this.containerHeight = _this.getElmByID('slidebar-container').getBoundingClientRect().height - 15;
-			_this.getElmByID('screenSet').style.height = _this.containerHeight - 152 + "px";
-			console.log('=======scrollHeight========',document.querySelector(".scroll-box").scrollHeight)
-		});
-		this.getDeatailData(1);
-		
-		// let el = document.querySelector(".scroll-box");
-		// if(this.hasSearchDate) {
-		// 	el.scrollTop = el.scrollHeight - 100;
-		// }	
+			_this.getElmByID('scroll-set').style.height = _this.containerHeight - 152 + "px";
+			if(_this.hasSearchDate) { // 有查询日期 滚动条最顶部
+				el.scrollTop = 10;
+				el.addEventListener('scroll', function() {
+					let allH, sh;
+					allH = el.scrollTop + el.clientHeight;
+					sh = el.scrollHeight;
+					if(el.scrollTop < 1 && _this.hasHistoryData) {
+						_this.getHistoryData(0);
+					}
+					if((sh - allH <= 1) && _this.hasForwardData) {
+						_this.getDeatailData(0);
+					}
+				})
+			}else {
+				el.scrollTop = el.scrollHeight;
+				el.addEventListener('scroll', function() {
+					if(el.scrollTop < 5 && _this.hasHistoryData) {
+						_this.getHistoryData(0);
+					}
+				})
+			}	
+		},100);	
 	},
   	methods: {
 		// 获取元素
@@ -112,7 +126,6 @@ export default {
 		},
 		// 获取详情数据以及下拉加载历史数据
 		getDeatailData(param) {
-			if(!this.hasForwardData) return;
 			let url = '/im/msg/forward';
 			let req = {
 				doctorAccId: this.doctorAccId,
@@ -124,32 +137,27 @@ export default {
 			}
 			this.POST(url, req).then((res) => {
 				if(res.code == '000000') {
+					let arr = [];
 					this.historyTime = res.data[0].timestamp;
-					if(param == 1) {
-						this.detailData = this.dataconcatHandle(res.data);
-					}else {
 					if(res.data.length > 0) {
 						this.hasForwardData = true;
 						this.lastMsgTime = res.data[res.data.length - 1].timestamp;
-							let arr = res.data;
+						arr = this.dataconcatHandle(res.data);
 						this.detailData.push(...arr);
-							this.detailData = this.dataconcatHandle(this.detailData);
 					}else {
 						this.hasForwardData = false;
 					}
-					}
-					if(this.hasSearchDate) { // 查询条件不包含日期
-						this.$nextTick(() => {
-							var element = document.querySelector(".scroll-box");
-							element.scrollTop = element.scrollHeight;
-						});
-					}
+					// if(this.hasSearchDate) { // 查询条件不包含日期
+					// 	this.$nextTick(() => {
+					// 		var element = document.querySelector(".scroll-box");
+					// 		element.scrollTop = element.scrollHeight;
+					// 	});
+					// }
 				}
 			})
 		},
 		// 上翻查看最新消息
 		getHistoryData(param) {
-			if(!this.hasHistoryData) return;
  			let url = '/im/msg/history';
 			let req = {
 				doctorAccId: this.doctorAccId,
@@ -167,10 +175,10 @@ export default {
 						let arr = res.data;
 						this.detailData.unshift(...arr);
 						this.detailData = this.dataconcatHandle(this.detailData);
-						this.$nextTick(() => {
-							const scrollBoxDom = document.querySelector(".scroll-box");
-							scrollBoxDom.scrollTop = 1000;
-						});
+						setTimeout(() => {
+							const scrollBoxDom = document.getElementById("scroll-set");
+							scrollBoxDom.scrollTop = 200;
+						},100);
 					}else {
 						this.hasHistoryData = false;
 					}
@@ -218,7 +226,7 @@ export default {
 		margin: 80px 20px 0;
 		padding: 0 20px;
 		background: #fff;
-		.message-content {
+		#scroll-set {
 			overflow: scroll;
 		}
 		.split-line {