chat聊天功能

src/views/HomeView/Works.vue

@@ -9,7 +9,7 @@
 			<div v-show="!isScroll" class="modal_title_text_assistant gallery_btn white" :class="{active:'all' == worksSelect}" @click="setWorksSelect({value:'all'})">All</div>
 			<div v-show="!isScroll" class="modal_title_text_assistant gallery_btn white" :class="{active:'NewYear_2025' == worksSelect}" @click="setWorksSelect({value:'NewYear_2025'})">NewYear_2025</div>
 		</div> -->
-        <div class="page_content" >
+        <div class="page_content" ref="autoscrollDom">
 			<Falls ref="fall" @loadend="isShowMark = false" @setPortfolioLike="setPortfolioLike" :isScroll="isScroll" @getImgScale="getImgScale"></Falls>
 			<div class="page_loading_box" v-show="!isNoData">
 				<span class="page_loading" v-show="!isShowMark"></span>
@@ -28,7 +28,7 @@
 </template>
 <script lang="ts">
 import { LoadingOutlined } from "@ant-design/icons-vue";
-import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,watch,computed} from 'vue'
+import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,watch,onBeforeUnmount} from 'vue'
 // import RobotAssist from "@/component/HomePage/RobotAssist.vue";
 import { Https } from "@/tool/https";
 import newScaleImage from "@/component/WorksPage/newScaleImage.vue";
@@ -45,6 +45,10 @@ export default defineComponent({
 		generalMenu,
     },
 	props:{
+		autoscroll:{
+			 type:Boolean,
+			 default:false,
+		 },
 		isScroll:{
 			 type:Boolean,
 			 default:true,
@@ -101,6 +105,8 @@ export default defineComponent({
 			},
 			isShowMark:false,
 			isNoData:false,//如果数据为空就不加载
+			autoscrollDom:null as any,
+			autoscrollTime:null as any,
 		})
 		let menuList:any = ref([
 			{
@@ -228,7 +234,6 @@ export default defineComponent({
 			new IntersectionObserver(
 				(entries, observer) => {
 					// 如果不是相交，则直接返回
-					// console.log(entries[0]);
 					if (!entries[0].intersectionRatio) return;
 					filter.getListDate.page += 1
 					getPorfolio()
@@ -251,6 +256,50 @@ export default defineComponent({
 			nextTick(()=>{
 				setPorfolioDom()
 			})
+			//对元素设置自动滚动，每次滚动10px
+			if (prop.autoscroll) {
+				let isAdd = true
+				filter.autoscrollTime = setInterval(() => {
+					// console.log(filter.autoscrollDom.scrollHeight,filter.autoscrollDom.scrollTop+ filter.autoscrollDom.clientHeight)
+					if(filter.autoscrollDom.scrollHeight > filter.autoscrollDom.scrollTop+ filter.autoscrollDom.clientHeight-3 && filter.autoscrollDom.scrollHeight < filter.autoscrollDom.scrollTop+ filter.autoscrollDom.clientHeight+3){
+						isAdd = false
+					}
+					if(filter.autoscrollDom.scrollTop < 3){
+						isAdd = true	
+					}
+					if(isAdd){
+						filter.autoscrollDom.scrollTop += 2;
+					}else{
+						filter.autoscrollDom.scrollTop -= 2;
+					}
+				}, 10);
+			}
+		
+				
+			// const start = filter.autoscrollDom.scrollTop;
+			// const maxScroll = filter.autoscrollDom.scrollHeight - filter.autoscrollDom.clientHeight;
+			// const duration = 3000; // 完整滚动时长（ms）
+			// let startTime:any = null;
+
+			// function animate(currentTime:any) {
+			// 	if (!startTime) startTime = currentTime;
+			// 	const elapsed = currentTime - startTime;
+			// 	const progress = Math.min(elapsed / duration, 1); // 0~1
+				
+			// 	// 缓动函数（easeInOutQuad）
+			// 	const easeProgress = progress < 0.5 
+			// 	? 2 * progress * progress 
+			// 	: 1 - Math.pow(-2 * progress + 2, 2) / 2;
+				
+			// 	filter.autoscrollDom.scrollTop = start + (maxScroll - start) * easeProgress;
+
+			// 	if (progress < 1) {
+			// 	filter.autoscrollTime = requestAnimationFrame(animate);
+			// 	}
+			// }
+
+			// filter.autoscrollTime = requestAnimationFrame(animate);
+
 			let data = {
 				id:router.currentRoute.value.query?.workId
 			}
@@ -258,6 +307,9 @@ export default defineComponent({
 				getImgScale(data)
 			}
 		})
+		onBeforeUnmount(() => {
+			clearInterval(filter.autoscrollTime); // 清除定时器
+		})
         return {
 			...toRefs(filter),
 			menuList,
@@ -298,6 +350,7 @@ export default defineComponent({
 		padding: 0;
 		border-radius: 0;
 		.page_content{
+			scrollbar-width: none;
 			border-radius: 0;
 		}
 	}