1

pages/knowledge/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="detail">
-		<scroll-view scroll-y="true" :scroll-top="scrollTop" :style="{
+		<scroll-view @scroll="handleScroll" scroll-y="true" :scroll-top="scrollTop" :style="{
         height: isExpanded ? 'calc(100% - 1rpx)' : 'calc(100% - 1rpx)',
       }" class="chatlist" :class="{ 'chatlist-wrapper-expanded': isExpanded }" id="scrollView" ref="scrollView"
 			@click="clickContent">
@@ -64,6 +64,9 @@
 			</view>
 
 		</view>
+		<!-- <view class="downward" v-if="isToBottom" @click="toBottom">
+			<u-icon name="arrow-downward"></u-icon>
+		</view> -->
 	</view>
 </template>
 
@@ -114,7 +117,14 @@
 						text: "请给我一个典型的视距不良路口案例。",
 					},
 				],
-				timer: null
+				timer: null,
+				isHandleScroll: true,
+				startX: 0, // 触摸开始时的X坐标  
+				startY: 0, // 触摸开始时的Y坐标  
+				isScrolling: false, // 是否正在滑动  
+				isToBottom: false,
+				lastScrollTop: 0, // 记录上一次滚动位置
+				temp: 0,
 			};
 		},
 		onLoad() {
@@ -142,6 +152,65 @@
 			}
 		},
 		methods: {
+			handleTouchStart(e) {
+				// 获取触摸开始时的坐标  
+				this.startX = e.touches[0].clientX;
+				this.startY = e.touches[0].clientY;
+				// this.isScrolling = false; // 重置滑动状态  
+			},
+			handleTouchMove(e) {
+				// 获取触摸移动时的坐标  
+				let moveX = e.touches[0].clientX;
+				let moveY = e.touches[0].clientY;
+
+				// 计算坐标变化量  
+				let deltaX = moveX - this.startX;
+				let deltaY = moveY - this.startY;
+
+				// 判断是否发生了足够的滑动（这里以5px为例）  
+				if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+					// this.isScrolling = true; // 标记为正在滑动  
+					this.isHandleScroll = false
+					// 根据deltaY的正负判断滑动方向  
+					if (deltaY > 0) {
+						console.log('用户正在向下滑动');
+					} else if (deltaY < 0) {
+
+						console.log('用户正在向上滑动');
+					}
+
+					// 如果需要，可以在这里更新startX和startY为moveX和moveY，以继续追踪滑动  
+					// 但在这个简单的示例中，我们不需要这样做  
+				}
+
+				// 注意：这里不更新startX和startY，因为我们只关心触摸开始到当前位置的相对变化  
+			},
+			handleTouchEnd(e) {
+				// 触摸结束时的处理  
+				// 例如，可以重置startX和startY，或者执行其他清理工作  
+				// 但在这个示例中，我们不做额外处理  
+			},
+			handleScroll(event) {
+				// event.detail 包含了滚动事件的详细信息
+				const scrollTop = event.detail.scrollTop;
+				if (scrollTop > this.lastScrollTop) {
+					console.log('向下滑动');
+				} else {
+					this.temp++
+					if (this.temp == 2) {
+						this.isHandleScroll = false
+					}
+
+					console.log('向上滑动');
+				}
+				this.lastScrollTop = scrollTop;
+			},
+			toBottom() {
+				this.isToBottom = false
+				this.scrollTop = Number(this.scrollTop) + 100;
+				this.isHandleScroll = true
+
+			},
 			async queryChat(voiceText) {
 				// console.log(voiceText,"voiceText");
 				clearInterval(this.timer)
@@ -214,6 +283,8 @@
 						duration: 2000,
 					});
 				}
+				this.temp = 0
+				this.isHandleScroll = true
 				this.changeMsgList("0", this.inputValue || text);
 				this.queryChat(this.inputValue || text);
 				this.inputValue = "";
@@ -252,7 +323,10 @@
 							//   this.$refs.scrollView.$refs.content
 							//     ? this.$refs.scrollView.$refs.content.scrollHeight
 							//     : 0;
-							this.scrollTop = this.scrollTop + 100;
+							if (this.isHandleScroll) {
+								this.scrollTop = Number(this.scrollTop) + 100;
+							}
+
 						});
 						if (newdata == data) {
 							clearInterval(this.timer);
@@ -274,7 +348,9 @@
 						//     this.$refs.scrollView.$refs.content
 						//       ? this.$refs.scrollView.$refs.content.scrollHeight
 						//       : 0;
-						this.scrollTop = this.scrollTop + 100;
+						if (this.isHandleScroll) {
+							this.scrollTop = Number(this.scrollTop) + 100;
+						}
 					});
 				}
 
@@ -943,4 +1019,24 @@
 			transform: scale(1);
 		}
 	}
+
+	.downward {
+		position: fixed;
+		z-index: 100rpx;
+		right: 20rpx;
+		bottom: 150rpx;
+		background: #ffffff;
+		border: #cccccc solid 1px;
+		width: 60rpx;
+		height: 60rpx;
+		border-radius: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		/deep/ .u-icon__icon {
+			font-size: 30rpx !important;
+			color: #999999 !important;
+		}
+	}
 </style>