developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangliang_wd
b92b5803 1 parent fa412e96

feat:优化电子报弹出方式，优化电子报骨架图展示

Inline Side-by-side
Showing 3 changed files with 80 additions and 42 deletions
... ... @@ -9,7 +9,7 @@ import font from '@ohos.font';
import { ENewspaperPageDialog } from '../dialog/ENewspaperPageDialog';
import { RMCalendarBean } from './calendar/RMCalendarBean';
import { newsSkeleton } from './skeleton/newsSkeleton';
import { Logger, ToastUtils, NetworkUtil, CustomToast } from 'wdKit/Index';
import { Logger, ToastUtils, NetworkUtil, CustomToast, DisplayUtils } from 'wdKit/Index';
import { TrackingContent, TrackConstants, TrackingButton } from 'wdTracking/Index';
import { WDShare } from 'wdShare/Index';
import { window } from '@kit.ArkUI';
... ... @@ -25,6 +25,9 @@ export struct ENewspaperPageComponent {
@State picHeight: number = 0
@Provide itemPicWidth: number = 0
@Provide itemPicHeight: number = 0
@Provide topMargin: number = DisplayUtils.getDeviceHeight()
@State newspaperListBean: NewspaperListBean = {} as NewspaperListBean
@Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
@State pageDialogShow: boolean = false
... ... @@ -404,6 +407,14 @@ export struct ENewspaperPageComponent {
}
if (this.newspaperListBean.list && this.newspaperListBean.list.length > 0) {
this.isOpenListDialog = true
animateTo({
duration: 300,
onFinish: () => {
}
}, () => {
this.topMargin = 0;
})
//电子报--读报纸点击
TrackingContent.clickWithEvent('read_newspaper_click', TrackConstants.PageName.NewsPaperPage,
TrackConstants.PageName.NewsPaperPage
... ... @@ -429,8 +440,16 @@ export struct ENewspaperPageComponent {
newspaperListBean: this.newspaperListBean,
scrollIndex: this.swiperIndex,
closeDialog: () => {
animateTo({
duration: 300,
onFinish: () => {
this.isOpenListDialog = false
}
}, () => {
this.topMargin = DisplayUtils.getDeviceHeight();
})
}
})
}
}
... ... @@ -451,6 +470,7 @@ export struct ENewspaperPageComponent {
// 计算图片的内容宽高
this.itemPicWidth = this.picWidth - vp2px(20)
this.itemPicHeight = this.picHeight - vp2px(28)
try {
if (NetworkUtil.isNetConnected()) {
let listBean =
... ...
... ... @@ -7,7 +7,7 @@
export struct newsSkeleton {
@State quantity: Array<number> = [1, 2, 3,]
@State showBottom: boolean = true
@Consume itemPicHeight: number
build() {
Row() {
Column() {
... ... @@ -17,12 +17,12 @@ export struct newsSkeleton {
Column() {
Image($r('app.media.peopleSeleton'))
.width('100%')
.height(47)// 后缀名不能省略
.height(this.getCompHeight(47))// 后缀名不能省略
.interpolation(ImageInterpolation.High)
.margin({
bottom: 6
})
textArea('100%', 8)
textArea('100%', this.getCompHeight(8),this.getCompHeight(5))
}
.margin({
right: '2%'
... ... @@ -33,20 +33,17 @@ export struct newsSkeleton {
Column() {
Row()
.width(`100%`)
.height(25)
.height(this.getCompHeight(25))
.backgroundColor('#FFF5F5F5')
Row()
.width(`100%`)
.height(4)
.height(this.getCompHeight(4))
.backgroundColor('#FFF5F5F5')
.margin({ top: 3, bottom: 3 })
.margin({ top: this.getCompHeight(3), bottom: this.getCompHeight(3) })
Row()
.width(`100%`)
.height(20)
.height(this.getCompHeight(20))
.backgroundColor('#FFF5F5F5')
// textArea(27, 25)
// textArea(27, 4)
// textArea(27, 20)
}
.width(`22%`)
.border({ width: 1 })
... ... @@ -63,59 +60,59 @@ export struct newsSkeleton {
.width('100%')
BoxAndLine().width('100%')
BoxAndBox({ firstBoxNumber: '65%', boxHeight: 100 })
BoxAndBox({ firstBoxNumber: '65%', boxHeight: this.getCompHeight(100) })
Column() {
textArea('100%', 79)
textArea('100%', this.getCompHeight(79),this.getCompHeight(5))
}
BoxAndBox({ firstBoxNumber: '30%', boxHeight: 51 })
BoxAndBox({ firstBoxNumber: '30%', boxHeight: this.getCompHeight(48) })
}
.width('50%')
.width('49%')
.margin({ right: 5 })
Column() {
Column() {
textArea('100%', 13)
textArea('100%', this.getCompHeight(13),this.getCompHeight(0))
}.width('100%')
Column() {
textArea('100%', 136)
textArea('100%', 13)
textArea('80%', 13)
textArea('100%', this.getCompHeight(136),this.getCompHeight(5))
textArea('100%', this.getCompHeight(13),this.getCompHeight(5))
textArea('80%', this.getCompHeight(13),this.getCompHeight(5))
}.width('100%').alignItems(HorizontalAlign.Start)
Column() {
textArea('100%', 126)
textArea('100%', this.getCompHeight(126),this.getCompHeight(5))
}
Column() {
textArea('100%', 13)
textArea('100%', this.getCompHeight(13),this.getCompHeight(5))
}
Row() {
Column() {
textArea('100%', 30)
textArea('100%', this.getCompHeight(30),this.getCompHeight(5))
}.width('50%').margin({ right: 5 })
Column() {
textArea('100%', 30)
textArea('100%', this.getCompHeight(30),this.getCompHeight(5))
}.layoutWeight(1)
}.width('100%').justifyContent(FlexAlign.SpaceBetween)
Column() {
textArea('100%', 100)
textArea('100%', this.getCompHeight(100),this.getCompHeight(5))
}
}
.width('50%')
.width('49%')
}
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor(Color.White)
.padding({
top: 15,
bottom: 15,
right: 15,
left: 15
top: 14,
right: 10,
bottom: 14,
left: 10
})
if (this.showBottom) {
// Column().backgroundColor('#CBCBCB').height(5).width(339)
... ... @@ -133,17 +130,31 @@ export struct newsSkeleton {
.width('100%')
}
getCompHeight(height: number): number{
//设计图高度 478
let compH:number = height*px2vp(this.itemPicHeight)/478
return compH;
}
}
@Component
struct BoxAndLine {
@Consume itemPicHeight: number
build() {
Column() {
textArea('100%', 130)
textArea('100%', 13)
textArea('80%', 13)
textArea('100%', this.getCompHeight(130),this.getCompHeight(5))
textArea('100%', this.getCompHeight(13),this.getCompHeight(5))
textArea('80%', this.getCompHeight(13),this.getCompHeight(5))
}.alignItems(HorizontalAlign.Start)
}
getCompHeight(height: number): number{
//设计图高度 478
let compH:number = height*px2vp(this.itemPicHeight)/478
return compH;
}
}
... ... @@ -151,29 +162,37 @@ struct BoxAndLine {
struct BoxAndBox {
@Prop firstBoxNumber: number | Resource | string
@Prop boxHeight: number | Resource | string
@Consume itemPicHeight: number
build() {
Row() {
Column() {
textArea('100%', this.boxHeight)
textArea('100%', this.boxHeight,this.getCompHeight(5))
}.width(this.firstBoxNumber).margin({ right: 5 })
Column() {
textArea('100%', this.boxHeight)
textArea('100%', this.boxHeight,this.getCompHeight(5))
}.layoutWeight(1)
}.width('100%').justifyContent(FlexAlign.SpaceBetween)
}
getCompHeight(height: number): number{
//设计图高度 478
let compH:number = height*px2vp(this.itemPicHeight)/478
return compH;
}
}
@Builder
function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {
function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%',topM:number) {
Row()
.width(width)
.height(height)
.backgroundColor('#FFF5F5F5')
.margin({ top: 5 })
.backgroundColor(height === 13?Color.Red:'#FFF5F5F5')
.margin({ top: topM })
// .borderRadius(5)
}
... ...
... ... @@ -21,6 +21,7 @@ export struct ENewspaperListDialog {
@State scrollOffset: number = 0
@State isCurrentViewOpen: boolean = false
@Consume bottomSafeHeight: number
@Consume topMargin:number
//文字版选择弹框
pageListDialogController: CustomDialogController = new CustomDialogController({
builder: ENewspaperPageDialog({
... ... @@ -292,7 +293,7 @@ export struct ENewspaperListDialog {
left: 15,
right: 15,
// top: 16,
// bottom: 16
bottom: 25
})
.margin({
bottom: 85
... ... @@ -317,15 +318,13 @@ export struct ENewspaperListDialog {
})
}
.margin({ top: this.topHeight })
.margin({ top: this.topHeight + this.topMargin})
.width('100%')
.backgroundColor(Color.White)
}
.width('100%')
.height('100%')
.backgroundColor('#80000000')
.margin({ bottom: 50 })
.onClick(() => {
if (this.closeDialog) {
this.closeDialog()
... ...