王士厅

电子报折叠屏适配

... ... @@ -37,7 +37,7 @@ export struct ENewspaperItemComponent {
.onComplete(() => {
this.isShowSkeleton = false
})
.objectFit(ImageFit.Fill)
.objectFit(ImageFit.Contain)
.visibility(this.isShowSkeleton ? Visibility.None : Visibility.Visible)
Canvas(this.context)
... ...
... ... @@ -12,9 +12,13 @@ import { newsSkeleton } from './skeleton/newsSkeleton';
import { Logger, ToastUtils, NetworkUtil } from 'wdKit/Index';
import { TrackingContent,TrackConstants, TrackingButton } from 'wdTracking/Index';
import { WDShare } from 'wdShare/Index';
import { window } from '@kit.ArkUI';
import { WindowModel } from 'wdKit';
//电子报UI
@Component
export struct ENewspaperPageComponent {
private windowClass?: window.Window;
private displayTool = display.getDefaultDisplaySync()
private screenWidth: number = 0
private picWidth: number = 0
... ... @@ -30,6 +34,7 @@ export struct ENewspaperPageComponent {
@State selectDate: Date = new Date()
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
@State ratio: string = '100%'
//watch监听报纸页码回调
onCurrentPageNumUpdated(): void {
... ... @@ -101,8 +106,12 @@ export struct ENewspaperPageComponent {
// })
async aboutToAppear() {
this.windowClass = WindowModel.shared.getWindowClass(); // 获取应用主窗口
this.screenWidth = this.windowClass?.getWindowProperties()?.windowRect.width
console.log('ENewspaperPageComponent this.screenWidth', this.screenWidth)
// 2000折叠屏 TODO DeviceUtil 方法完善了换判断条件
this.ratio = this.screenWidth > 2000 ? '60%' : '100%'
//获取宽高尺寸
this.screenWidth = this.displayTool.width
this.picWidth = this.screenWidth - vp2px(52)
let screenHeight = this.displayTool.height;
// bottomSafeHeight 底导高度 topSafeHeight 顶导高度 44 顶部高度 60 底部高度
... ... @@ -121,6 +130,7 @@ export struct ENewspaperPageComponent {
})
this.getNewspaperTime()
this.getNewspaperList()
this.resizeWindow()
}
aboutToDisappear() {
... ... @@ -130,6 +140,15 @@ export struct ENewspaperPageComponent {
// if (this.listDialogController) {
// this.listDialogController = null
// }
this.windowClass?.off('windowSizeChange');
}
resizeWindow() {
this.windowClass?.on('windowSizeChange', () => {
this.screenWidth = this.windowClass?.getWindowProperties()?.windowRect.width || this.displayTool.width
// 2000折叠屏 TODO DeviceUtil 方法完善了换判断条件
this.ratio = this.screenWidth > 2000 ? '60%' : '100%'
});
}
build() {
... ... @@ -217,7 +236,7 @@ export struct ENewspaperPageComponent {
})
}
.index(this.swiperIndex)
.width('100%')
.width(this.ratio)
// newspaper_shadow 44 高度 e_newspaper_content 35 margin top
.height(px2vp(this.picHeight) - 44 - 35)
.vertical(true)
... ...