developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
chenquansheng
be963ba4 1 parent d49ab542

ref |> 图文详情点击评论需要有正文和数字的切换功能开发

Inline Side-by-side
Showing 5 changed files with 39 additions and 19 deletions
... ... @@ -69,6 +69,7 @@ export struct ImageAndTextPageComponent {
private screenHeight: number = 0
private topHeight: number = 32
private bottomHeight: number = 150
@State showMainText: boolean = false
pageShowTime:number = 0;
pageHideTime:number = 0;
lastTimeoutId?: number
... ... @@ -165,6 +166,7 @@ export struct ImageAndTextPageComponent {
.onAreaChange((oldValue: Area, newValue: Area) => {
this.info = newValue
console.log(TAG, "总页面滑动偏移量", this.scroller.currentOffset().yOffset)
console.log(TAG, "总页面滑动偏移量111", newValue.globalPosition.y as number)
this.checkToScrollCommentArea()
})
// .onMeasureSize()
... ... @@ -207,25 +209,41 @@ export struct ImageAndTextPageComponent {
contentDetailData: this.contentDetailData,
publishCommentModel: this.publishCommentModel,
operationButtonList: this.operationButtonList,
showMainText:this.showMainText,
styleType: 1,
onCommentIconClick: () => {
const info = componentUtils.getRectangleById('comment');
console.log(TAG, "点击滑动页面", 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)
//评论区当前位置
let currentCommonentOffSetY = this.info?.globalPosition.y as number
let offSetY = 0
if (currentCommonentOffSetY >= (this.screenHeight-this.bottomHeight) ) {
offSetY = currentCommonentOffSetY-200
this.showMainText = true
}else {
this.showMainText = false
}
this.isScrollTop = !this.isScrollTop
this.scroller.scrollTo({
yOffset: offSetY,
xOffset: 0,
animation: { duration: 1000, curve: Curve.Ease }
})
// 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
}
})
}
... ... @@ -464,7 +482,7 @@ export struct ImageAndTextPageComponent {
return
}
let offSetY = currentScrollOffSetY
if (currentCommonentOffSetY > (this.screenHeight-this.bottomHeight) ) {
if (currentCommonentOffSetY >= (this.screenHeight-this.bottomHeight) ) {
offSetY = currentCommonentOffSetY-200
}else {
offSetY = currentScrollOffSetY + currentCommonentOffSetY-100
... ...
... ... @@ -161,6 +161,7 @@ export struct CommentIconComponent {
/*展示类型*/
@State type: number = 1
@Prop contentDetail: ContentDetailDTO
@Prop showMainText: boolean = false // 是否显示正文样式
styleType: number = 1 //1: 白色背景（图文底部栏） 2: 黑色背景（图集底部栏）
// aboutToAppear(): void {
// setTimeout(() => {
... ... @@ -186,7 +187,7 @@ export struct CommentIconComponent {
// Stack({alignContent:Alignment.Start}) {
if (Number.parseInt(this.publishCommentModel.totalCommentNumer) != 0) {
RelativeContainer() {
Image(this.styleType == 1 ? $r('app.media.comment_icon_number_bg') : $r('app.media.ic_like_back_Select'))
Image(this.styleType == 1 ? this.showMainText?$r('app.media.comment_icon_text_bg'):$r('app.media.comment_icon_number_bg') : this.showMainText?$r('app.media.comment_icon_text_block_bg'):$r('app.media.ic_like_back_Select'))
.objectFit(ImageFit.Fill)
.resizable({
slice: {
... ... @@ -205,10 +206,9 @@ export struct CommentIconComponent {
// x:-6
// })
.id("Image")
Text(this.publishCommentModel.totalCommentNumer)// Text("44444444")
Text(this.showMainText?'正文':this.publishCommentModel.totalCommentNumer)// Text("44444444")
.fontSize(8)
.fontColor('#ffffff')// .backgroundColor('#ED2800')
.fontColor(this.showMainText?'#222222':'#ffffff')// .backgroundColor('#ED2800')
.height(12)
.textAlign(TextAlign.Center)
.alignRules({
... ...
... ... @@ -79,6 +79,7 @@ export struct OperRowListView {
@ObjectLink publishCommentModel: publishCommentModel
@State styleType: number = -1
@State showCommentIcon: boolean = true // 评论图标
@Prop showMainText: boolean = false // 是否显示正文样式
@State bgColor: ResourceColor = Color.White
@State interactData: InteractDataDTO = {} as InteractDataDTO
@State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
... ... @@ -299,7 +300,8 @@ export struct OperRowListView {
CommentIconComponent({
publishCommentModel: this.publishCommentModel,
styleType: this.styleType,
contentDetail: this.contentDetailData
contentDetail: this.contentDetailData,
showMainText: this.showMainText
})
.onClick(() => {
console.log('akdbakdbakdbaksjd')
... ...