|
|
@@ -1,72 +1,102 @@
|
|
|
-import { Component } from '@angular/core';
|
|
|
-
|
|
|
-// 引用服务
|
|
|
+import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';
|
|
|
import { Router } from '@angular/router';
|
|
|
-
|
|
|
-// 引入Parse第三方库
|
|
|
-import * as Parse from "parse"
|
|
|
-(Parse as any).serverURL = "http://web2023.fmode.cn:9999/parse"
|
|
|
-Parse.initialize("dev")
|
|
|
+import * as Parse from "parse";
|
|
|
|
|
|
@Component({
|
|
|
selector: 'app-community',
|
|
|
templateUrl: './community.component.html',
|
|
|
styleUrls: ['./community.component.scss']
|
|
|
})
|
|
|
-export class CommunityComponent {
|
|
|
+export class CommunityComponent implements OnInit {
|
|
|
+
|
|
|
+ scienceList: Array<Parse.Object> = [];
|
|
|
+ recommendList: Array<Parse.Object> = [];
|
|
|
+ attentionList: Array<Parse.Object> = [];
|
|
|
+
|
|
|
+ startX: number = 0;
|
|
|
+ currentX: number = 0;
|
|
|
+ isDragging: boolean = false;
|
|
|
+ minTranslateX: number = 0; // 最小平移距离
|
|
|
+ maxTranslateX: number = 0;
|
|
|
|
|
|
- scienceList: Array<Parse.Object> = []
|
|
|
- recommendList: Array<Parse.Object> = []
|
|
|
- attentionList: Array<Parse.Object> = []
|
|
|
+ @ViewChild('carousel', { static: true }) carousel!: ElementRef;
|
|
|
|
|
|
+ cate: string = 'all';
|
|
|
|
|
|
- // 依赖注入
|
|
|
- constructor(private router: Router) {
|
|
|
+ constructor(private router: Router, private renderer: Renderer2) {
|
|
|
this.initPage();
|
|
|
}
|
|
|
- // 首次进入页面，默认加载首批数据
|
|
|
+
|
|
|
+ ngOnInit(): void {
|
|
|
+ this.renderer.listen(this.carousel.nativeElement, 'touchstart', this.onTouchStart.bind(this));
|
|
|
+ this.renderer.listen(this.carousel.nativeElement, 'touchmove', this.onTouchMove.bind(this));
|
|
|
+ this.renderer.listen(this.carousel.nativeElement, 'touchend', this.onTouchEnd.bind(this));
|
|
|
+ }
|
|
|
+
|
|
|
async initPage() {
|
|
|
- this.scienceList = await this.getScienceData()
|
|
|
- this.recommendList = await this.gteRecommendData()
|
|
|
- this.attentionList = await this.gteAttentionData()
|
|
|
+ this.scienceList = await this.getScienceData();
|
|
|
+ this.recommendList = await this.getRecommendData();
|
|
|
+ this.attentionList = await this.getAttentionData();
|
|
|
+ // 设置最大最小平移距离
|
|
|
+ this.maxTranslateX = this.carousel.nativeElement.offsetWidth - window.innerWidth;
|
|
|
}
|
|
|
|
|
|
- // 数据加载相关函数
|
|
|
async getScienceData() {
|
|
|
let query = new Parse.Query("PetScience");
|
|
|
let list = await query.find();
|
|
|
- return list
|
|
|
+ return list;
|
|
|
}
|
|
|
- async gteRecommendData() {
|
|
|
+
|
|
|
+ async getRecommendData() {
|
|
|
let query = new Parse.Query("PetRecommend");
|
|
|
let list = await query.find();
|
|
|
- return list
|
|
|
+ return list;
|
|
|
}
|
|
|
- async gteAttentionData() {
|
|
|
+
|
|
|
+ async getAttentionData() {
|
|
|
let query = new Parse.Query("PetAttention");
|
|
|
let list = await query.find();
|
|
|
- return list
|
|
|
+ return list;
|
|
|
}
|
|
|
|
|
|
- cate: string = "推荐"
|
|
|
- // 跳转函数
|
|
|
goScienceDetail(science: Parse.Object) {
|
|
|
this.router.navigate(["/lesson/community/scienceDetail"], {
|
|
|
queryParams: science
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
goRecommendDetail(recommend: Parse.Object) {
|
|
|
this.router.navigate(["/lesson/community/recommendDetail"], {
|
|
|
queryParams: recommend
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
goAttentionDetail(attention: Parse.Object) {
|
|
|
this.router.navigate(["/lesson/community/attentionDetail"], {
|
|
|
queryParams: attention
|
|
|
- })
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ onTouchStart(event: TouchEvent): void {
|
|
|
+ this.startX = event.touches[0].clientX;
|
|
|
+ this.isDragging = true;
|
|
|
}
|
|
|
|
|
|
+ onTouchMove(event: TouchEvent): void {
|
|
|
+ if (this.carousel && this.isDragging) {
|
|
|
+ const touch = event.touches[0];
|
|
|
+ const deltaX = touch.clientX - this.startX;
|
|
|
+ this.currentX = this.currentX + deltaX;
|
|
|
+
|
|
|
+ // 限制平移范围在最大最小值之间
|
|
|
+ this.currentX = Math.max(this.minTranslateX, Math.min(this.maxTranslateX, this.currentX));
|
|
|
|
|
|
+ this.renderer.setStyle(this.carousel.nativeElement, 'transform', `translateX(${-this.currentX}px)`);
|
|
|
+ this.startX = touch.clientX;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+ onTouchEnd(): void {
|
|
|
+ this.isDragging = false;
|
|
|
+ }
|
|
|
}
|
