yuanfeiyang3_wd

feat: bug-18383 动态详情页,添加自动定位评论区域位置功能

... ... @@ -6,6 +6,8 @@ import {
NumberFormatterUtils,
DisplayUtils,
NetworkUtil,
EmitterUtils,
EmitterEventId,
FastClickUtil
} from 'wdKit';
import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
... ... @@ -45,6 +47,7 @@ import { detailedSkeleton } from './skeleton/detailSkeleton';
import { viewBlogItemInsightIntentShare } from '../utils/InsightIntentShare'
import { common } from '@kit.AbilityKit';
import { ParamType, TrackConstants, TrackingButton, TrackingContent } from 'wdTracking/Index';
import { componentUtils, window } from '@kit.ArkUI';
const TAG = 'DynamicDetailComponent'
const PATTERN_DATE_CN_RN: string = 'yyyy年MM月dd日 HH:mm';
... ... @@ -79,6 +82,8 @@ export struct DynamicDetailComponent {
@State operationButtonList: string[] = []
@State likesStyle: number | string = 1 // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
@State openLikes: boolean = false // 是否可以点赞 1:可以 0:不可以
@State offsetY: number = 0
@State isScrollTop: boolean = true
pageParam: ParamType = {}
commentListAreaInfo?: Area
... ... @@ -91,6 +96,27 @@ export struct DynamicDetailComponent {
// 内容用 点赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
this.likesStyle = this.contentDetailData.likesStyle
this.openLikes = this.contentDetailData.openLikes == 1 ? true : false
//注册通知,来自别的组件的评论成功通知
EmitterUtils.receiveEvent(EmitterEventId.COMMENT_PUBLISH, (targetId?: string) => {
if (targetId) {
if (targetId == this.publishCommentModel.targetId) {
// 滚动到评论列表
if (this.commentListAreaInfo) {
// let height = DisplayUtils.getDeviceHeight() / 2
let offSetY = this.commentListAreaInfo?.globalPosition.y as number
Logger.debug(TAG, "滚动至yOffset: " + (offSetY - 100))
//头部距离48
this.scroller.scrollTo({
yOffset: offSetY - 100,
xOffset: 0,
animation: { duration: 1000, curve: Curve.Ease }
})
}
}
}
})
}
onPageHide() {
... ... @@ -577,8 +603,28 @@ export struct DynamicDetailComponent {
publishCommentModel: this.publishCommentModel,
operationButtonList: this.operationButtonList,
styleType: 1,
onCommentIconClick:()=>{
const info = componentUtils.getRectangleById('comment');
console.log(JSON.stringify(info))
if (!this.offsetY) {
this.offsetY = componentUtils.getRectangleById('comment').windowOffset.y
}
// 定位到评论区域
if (this.isScrollTop) {
this.scroller.scrollTo({
xOffset: 0,
yOffset: this.offsetY,
animation: true
})
} else {
this.scroller.scrollEdge(Edge.Top)
}
this.isScrollTop = !this.isScrollTop
}
})
.height(100)
}
.margin({bottom: 65})
}
... ...