|
|
@@ -36,12 +36,6 @@ export class Tab1Page implements AfterViewInit {
|
|
|
}
|
|
|
];
|
|
|
|
|
|
- currentIndex = 0;
|
|
|
- startX: number = 0; // 初始化 startX
|
|
|
- endX: number = 0; // 初始化 endX
|
|
|
- isDragging: boolean = false; // 标记是否正在拖动
|
|
|
- currentTranslate: number = 0; // 当前的平移值
|
|
|
-
|
|
|
// 功能按钮数据
|
|
|
functionItems1 = [
|
|
|
{ label: '我的病历', icon: 'document-text', route: '/medical-records' },
|
|
|
@@ -59,171 +53,129 @@ export class Tab1Page implements AfterViewInit {
|
|
|
{ label: '健康社区', icon: 'people', route: '/health-community' }
|
|
|
];
|
|
|
|
|
|
- // 轮播图数据
|
|
|
- promotionPosters = [
|
|
|
- { image: '../../assets/images/promotion1.jpg', description: '健康推广1' },
|
|
|
- { image: '../../assets/images/promotion2.jpg', description: '健康推广2' },
|
|
|
- { image: '../../assets/images/promotion3.jpg', description: '健康推广3' },
|
|
|
- { image: '../../assets/images/promotion4.jpg', description: '健康推广4' },
|
|
|
- { image: '../../assets/images/promotion5.jpg', description: '健康推广5' }
|
|
|
- ];
|
|
|
-
|
|
|
- promotionCurrentIndex = 0;
|
|
|
- promotionStartX: number = 0; // 初始化 startX
|
|
|
- promotionEndX: number = 0; // 初始化 endX
|
|
|
- isPromotionDragging: boolean = false; // 标记是否正在拖动
|
|
|
- promotionCurrentTranslate: number = 0; // 当前的平移值
|
|
|
+ currentIndex = 0;
|
|
|
+ startX: number = 0; // 初始化 startX
|
|
|
+ endX: number = 0; // 初始化 endX
|
|
|
+ isDragging: boolean = false; // 标记是否正在拖动
|
|
|
+ currentTranslate: number = 0; // 当前的平移值
|
|
|
+ cardWidth = 216; // 每个卡片的宽度加上间距 (200 + 16)
|
|
|
+ isCyclic: boolean = true; // 是否启用循环滑动
|
|
|
|
|
|
constructor(private router: Router) {}
|
|
|
|
|
|
ngAfterViewInit() {
|
|
|
- // 初始化时调用一次以确保初始状态正确
|
|
|
- this.updateCarousel();
|
|
|
- this.updatePromotionCarousel();
|
|
|
+ this.updateCarousel(); // 确保初始状态正确
|
|
|
+ this.calculateCardWidth(); // 动态计算卡片宽度
|
|
|
}
|
|
|
|
|
|
- // 上一张
|
|
|
- prevSlide() {
|
|
|
- if (this.currentIndex > 0) {
|
|
|
- this.currentIndex--;
|
|
|
- } else {
|
|
|
- this.currentIndex = this.doctors.length - 1;
|
|
|
+ // 计算卡片宽度
|
|
|
+ calculateCardWidth() {
|
|
|
+ const container = document.getElementById('carousel');
|
|
|
+ if (container && container.children.length > 0) {
|
|
|
+ const firstCard = container.children[0] as HTMLElement;
|
|
|
+ this.cardWidth = firstCard.offsetWidth + 16; // 加上间距
|
|
|
}
|
|
|
- this.updateCarousel();
|
|
|
- }
|
|
|
-
|
|
|
- // 下一张
|
|
|
- nextSlide() {
|
|
|
- if (this.currentIndex < this.doctors.length - 1) {
|
|
|
- this.currentIndex++;
|
|
|
- } else {
|
|
|
- this.currentIndex = 0;
|
|
|
- }
|
|
|
- this.updateCarousel();
|
|
|
}
|
|
|
|
|
|
// 更新轮播位置
|
|
|
-updateCarousel() {
|
|
|
- this.currentTranslate = -this.currentIndex * 100;
|
|
|
- this.updateCarouselPosition();
|
|
|
-}
|
|
|
-
|
|
|
-// 更新轮播位置
|
|
|
-updateCarouselPosition() {
|
|
|
- const container = document.getElementById('carousel');
|
|
|
- if (container) {
|
|
|
- container.style.transform = `translateX(${this.currentTranslate}%)`;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 触摸开始
|
|
|
-onTouchStart(event: TouchEvent) {
|
|
|
- this.startX = event.touches[0].clientX;
|
|
|
- this.isDragging = true;
|
|
|
-}
|
|
|
-
|
|
|
-// 触摸移动
|
|
|
-onTouchMove(event: TouchEvent) {
|
|
|
- if (this.isDragging) {
|
|
|
- const touchX = event.touches[0].clientX;
|
|
|
- const deltaX = touchX - this.startX;
|
|
|
- this.currentTranslate = -this.currentIndex * 100 + deltaX;
|
|
|
+ updateCarousel() {
|
|
|
+ this.currentTranslate = -this.currentIndex * this.cardWidth;
|
|
|
this.updateCarouselPosition();
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-// 触摸结束
|
|
|
-onTouchEnd(event: TouchEvent) {
|
|
|
- this.endX = event.changedTouches[0].clientX;
|
|
|
- this.isDragging = false;
|
|
|
-
|
|
|
- const swipeThreshold = 50; // 滑动阈值
|
|
|
- const deltaX = this.startX - this.endX;
|
|
|
-
|
|
|
- if (deltaX > swipeThreshold) {
|
|
|
- // 向左滑动
|
|
|
- this.nextSlide();
|
|
|
- } else if (deltaX < -swipeThreshold) {
|
|
|
- // 向右滑动
|
|
|
- this.prevSlide();
|
|
|
- } else {
|
|
|
- // 如果滑动距离不够，则恢复到原来的位置
|
|
|
- this.updateCarousel();
|
|
|
- }
|
|
|
-}
|
|
|
- // 导航到指定路由
|
|
|
- navigateTo(route: string) {
|
|
|
- this.router.navigate([route]);
|
|
|
- }
|
|
|
|
|
|
- // 更新轮播图位置
|
|
|
- updatePromotionCarousel() {
|
|
|
- this.promotionCurrentTranslate = -this.promotionCurrentIndex * 100;
|
|
|
- this.updatePromotionCarouselPosition();
|
|
|
+ // 更新轮播位置
|
|
|
+ updateCarouselPosition() {
|
|
|
+ const container = document.getElementById('carousel');
|
|
|
+ if (container) {
|
|
|
+ container.style.transform = `translateX(${this.currentTranslate}px)`;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 触摸开始
|
|
|
- onPromotionTouchStart(event: TouchEvent) {
|
|
|
- this.promotionStartX = event.touches[0].clientX;
|
|
|
- this.isPromotionDragging = true;
|
|
|
+ onTouchStart(event: TouchEvent) {
|
|
|
+ // event.preventDefault(); // 防止默认行为
|
|
|
+ this.startX = event.touches[0].clientX;
|
|
|
+ this.isDragging = true;
|
|
|
}
|
|
|
|
|
|
// 触摸移动
|
|
|
- onPromotionTouchMove(event: TouchEvent) {
|
|
|
- if (this.isPromotionDragging) {
|
|
|
+ onTouchMove(event: TouchEvent) {
|
|
|
+ if (this.isDragging) {
|
|
|
+ // event.preventDefault(); // 防止默认行为
|
|
|
const touchX = event.touches[0].clientX;
|
|
|
- const deltaX = touchX - this.promotionStartX;
|
|
|
- this.promotionCurrentTranslate = -this.promotionCurrentIndex * 100 + deltaX;
|
|
|
- this.updatePromotionCarouselPosition();
|
|
|
+ const deltaX = touchX - this.startX;
|
|
|
+ this.currentTranslate = -this.currentIndex * this.cardWidth + deltaX; // 动态更新平移值
|
|
|
+
|
|
|
+ // 限制 currentTranslate 的值
|
|
|
+ const maxTranslate = -(this.doctors.length - 1) * this.cardWidth;
|
|
|
+ this.currentTranslate = Math.max(Math.min(this.currentTranslate, 0), maxTranslate);
|
|
|
+
|
|
|
+ this.updateCarouselPosition();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 触摸结束
|
|
|
- onPromotionTouchEnd(event: TouchEvent) {
|
|
|
- this.promotionEndX = event.changedTouches[0].clientX;
|
|
|
- this.isPromotionDragging = false;
|
|
|
+ onTouchEnd(event: TouchEvent) {
|
|
|
+ this.endX = event.changedTouches[0].clientX;
|
|
|
+ this.isDragging = false;
|
|
|
|
|
|
const swipeThreshold = 50; // 滑动阈值
|
|
|
- const deltaX = this.promotionStartX - this.promotionEndX;
|
|
|
+ const deltaX = this.startX - this.endX;
|
|
|
|
|
|
if (deltaX > swipeThreshold) {
|
|
|
// 向左滑动
|
|
|
- this.nextPromotionSlide();
|
|
|
+ this.nextSlide();
|
|
|
} else if (deltaX < -swipeThreshold) {
|
|
|
// 向右滑动
|
|
|
- this.prevPromotionSlide();
|
|
|
+ this.prevSlide();
|
|
|
} else {
|
|
|
// 如果滑动距离不够，则恢复到原来的位置
|
|
|
- this.updatePromotionCarousel();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 更新轮播图位置
|
|
|
- updatePromotionCarouselPosition() {
|
|
|
- const container = document.getElementById('promotionCarousel');
|
|
|
- if (container) {
|
|
|
- container.style.transform = `translateX(${this.promotionCurrentTranslate}%)`;
|
|
|
+ this.snapToNearestCard();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 上一张
|
|
|
- prevPromotionSlide() {
|
|
|
- if (this.promotionCurrentIndex > 0) {
|
|
|
- this.promotionCurrentIndex--;
|
|
|
+ prevSlide() {
|
|
|
+ if (this.isCyclic) {
|
|
|
+ if (this.currentIndex === 0) {
|
|
|
+ this.currentIndex = this.doctors.length - 1;
|
|
|
+ } else {
|
|
|
+ this.currentIndex--;
|
|
|
+ }
|
|
|
} else {
|
|
|
- this.promotionCurrentIndex = this.promotionPosters.length - 1;
|
|
|
+ if (this.currentIndex > 0) {
|
|
|
+ this.currentIndex--;
|
|
|
+ }
|
|
|
}
|
|
|
- this.updatePromotionCarousel();
|
|
|
+ this.updateCarousel();
|
|
|
}
|
|
|
|
|
|
// 下一张
|
|
|
- nextPromotionSlide() {
|
|
|
- if (this.promotionCurrentIndex < this.promotionPosters.length - 1) {
|
|
|
- this.promotionCurrentIndex++;
|
|
|
+ nextSlide() {
|
|
|
+ if (this.isCyclic) {
|
|
|
+ if (this.currentIndex === this.doctors.length - 1) {
|
|
|
+ this.currentIndex = 0;
|
|
|
+ } else {
|
|
|
+ this.currentIndex++;
|
|
|
+ }
|
|
|
} else {
|
|
|
- this.promotionCurrentIndex = 0;
|
|
|
+ if (this.currentIndex < this.doctors.length - 1) {
|
|
|
+ this.currentIndex++;
|
|
|
+ }
|
|
|
}
|
|
|
- this.updatePromotionCarousel();
|
|
|
+ this.updateCarousel();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 快照到最近的卡片
|
|
|
+ snapToNearestCard() {
|
|
|
+ const cardIndex = Math.round(-this.currentTranslate / this.cardWidth);
|
|
|
+ this.currentIndex = Math.max(0, Math.min(cardIndex, this.doctors.length - 1));
|
|
|
+ this.updateCarousel();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 导航到指定路由
|
|
|
+ navigateTo(route: string) {
|
|
|
+ this.router.navigate([route]);
|
|
|
}
|
|
|
|
|
|
// 发布求医信息
|
AAA123