wangliang_wd

feat:优化H5界面布局,优化点赞

... ... @@ -24,6 +24,13 @@ export struct WdWebComponent {
@Link isPageEnd: boolean
@State subjectData : string = ''
@StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
currentChanged(){
///折叠屏转换
this.webviewControl.refresh()
}
build() {
Column() {
Web({ src: this.webUrl, controller: this.webviewControl })
... ...
... ... @@ -61,22 +61,20 @@ export struct H5NewsWebPageComponent {
private navTitle = '人民日报';
build() {
Column() {
Blank().height(`${this.topSafeHeight}px`)
//标题栏目
Stack({ alignContent: Alignment.Top }){
Stack(){
Column(){
CustomTitleUI({ titleName: this.navTitle })
Stack({ alignContent: Alignment.Bottom }) {
Column() {
WdWebComponent({
webviewControl: this.webviewControl,
webUrl: this.webUrl,
isPageEnd: $isPageEnd
})
}.width(CommonConstants.FULL_WIDTH)
.height(`calc(85% - ${ this.topSafeHeight + 'px'})`)
}
.width(CommonConstants.FULL_WIDTH)
.height(CommonConstants.FULL_HEIGHT)
.padding({ bottom: 150})
Stack(){
//底部交互区
OperRowListView({
contentDetailData: this.contentDetailData,
... ... @@ -87,21 +85,15 @@ export struct H5NewsWebPageComponent {
this.showCommentList = true
}
})
}
.alignContent(Alignment.Top)
.position({y:'85%'})
.width(CommonConstants.FULL_WIDTH)
.backgroundColor(Color.White)
.height(150)
//全部评论
CommentDialogView({
index: $index,
currentIndex: $currentIndex,
showCommentList: $showCommentList,
publishCommentModel: $publishCommentModel,
interactData: $interactData,
}).visibility(this.showComment ? Visibility.Visible : Visibility.Hidden)
}
}
.margin({top: `${this.topSafeHeight}px`, bottom: `${this.bottomSafeHeight}px`})
.width(CommonConstants.FULL_WIDTH)
.height(CommonConstants.FULL_HEIGHT)
}
... ...
... ... @@ -99,6 +99,9 @@ export struct LikeComponent {
} else if (this.componentType == 5) {
// 图集点赞,展示标识
this.likeCompStyle5()
}else if (this.componentType == 6) {
// H5
this.likeCompStyle6()
} else {
//1: 底部栏目样式 默认样式
this.likeCompStyle1()
... ... @@ -342,6 +345,58 @@ export struct LikeComponent {
}
@Builder
likeCompStyle6() {
//1:H5 底部栏目样式 默认样式
Stack({ alignContent: Alignment.Bottom }) {
Image(this.transLikeStyle().url)
.width(24)
.height(24)
if (this.likeCount > 0){
RelativeContainer() {
Image(this.likeStatus ? $r('app.media.ic_like_white_Select') : $r('app.media.ic_like_back'))
.objectFit(ImageFit.Fill)
.resizable({
slice: {
top: 1,
left: 20,
right: 1,
bottom: 1
}
})
.alignRules({
top: { anchor: "Text", align: VerticalAlign.Top },
left: { anchor: "Text", align: HorizontalAlign.Start },
right: { anchor: "Text", align: HorizontalAlign.End },
bottom: { anchor: "Text", align: VerticalAlign.Bottom },
})
.id("Image")
Text(NumberFormatterUtils.formatNumberWithWan(this.likeCount || ''))// Text("44444444")
.fontSize(8)
.fontColor('#ffffff')// .backgroundColor('#ED2800')
.height(12)
.textAlign(TextAlign.Center)
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})/*动态计算文字宽度*/
.width(this.getMeasureText(NumberFormatterUtils.formatNumberWithWan(this.likeCount || '')) +
12)// .backgroundColor(Color.Green)
.id("Text")
.visibility(this.likeCount > 0 ? Visibility.Visible : Visibility.Hidden)
}
.offset({
x: 12
})
}
}.width(24).height(24).onClick(() => {
this.clickButtonEvent()
})
.visibility(this.likesStyle == 4 || this.likesStyle == 'empty' || !this.openLikes ? Visibility.None : Visibility.Visible)
}
async clickButtonEvent() {
console.log(TAG, '点赞点击')
// 未登录,跳转登录
... ...
... ... @@ -325,7 +325,7 @@ export struct OperRowListView {
LikeComponent({
data: this.likeBean,
styleType: this.styleType,
componentType: 5,
componentType: 6,
pageComponentType: this.pageComponentType
})
}
... ...