developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
王士厅
5879f05a 1 parent fb5d7b00

图集bug修复

Inline Side-by-side
Showing 3 changed files with 94 additions and 77 deletions
... ... @@ -3,12 +3,12 @@ import { Logger } from 'wdKit';
const TAG = 'MultiPictureDetailPageComponent';
@Reusable
@Component
export struct MultiPictureDetailItemComponent {
private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean
//alt app.media.picture_loading 设计稿尺寸
@State imageWidth:string | number = 167
@State ratio:number = 167/60
async aboutToAppear() {
... ... @@ -20,12 +20,10 @@ export struct MultiPictureDetailItemComponent {
Image(this.MultiPictureDetailItem.picPath)
.alt($r('app.media.picture_loading'))
.width(this.imageWidth)
.aspectRatio(this.ratio)
.objectFit(ImageFit.Contain)
.interpolation(ImageInterpolation.High)
.onComplete(event => {
this.imageWidth = '100%'
this.ratio = this.MultiPictureDetailItem.width / this.MultiPictureDetailItem.height
})
}
.height('100%')
... ...
... ... @@ -46,6 +46,9 @@ export struct MultiPictureDetailPageComponent {
@State showDownload: Boolean = false // 控制是否显示下载默认隐藏
@State publishCommentModel: publishCommentModel = new publishCommentModel()
@State operationButtonList: string[] = ['comment', 'like', 'collect', 'share']
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') as number;
@State windowHeight: number = AppStorage.get<number>('windowHeight') as number;
@State currentOffset:number = 0
//watch监听页码回调
onCurrentPageNumUpdated(): void {
... ... @@ -90,9 +93,6 @@ export struct MultiPictureDetailPageComponent {
.height('100%')
.backgroundColor(Color.Black)
.id('e_picture_container')
// 设置顶部绘制延伸到状态栏
// 设置底部绘制延伸到导航条
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}
@Builder
... ... @@ -104,7 +104,7 @@ export struct MultiPictureDetailPageComponent {
Row() {
Stack() {
Image(this.getImgUrl())
.borderRadius(24)
.borderRadius(18)
.aspectRatio(1)
.border({ width: 1, color: Color.White, style: BorderStyle.Solid })
.width(36)
... ... @@ -157,7 +157,7 @@ export struct MultiPictureDetailPageComponent {
.margin(0)
.height(17)
Text(`${this.contentDetailData?.rmhInfo?.rmhDesc}`)
.fontColor('#676767')
.fontColor(Color.White)
.fontSize(12)
.fontFamily('PingFang SC-Regular')
.fontWeight(400)
... ... @@ -201,8 +201,8 @@ export struct MultiPictureDetailPageComponent {
}.alignItems(VerticalAlign.Center)
}
.borderRadius(4)
.backgroundColor('#B0B0B0')
.width(48)
.backgroundColor('#333333')
.width(54)
.height(24)
}
... ... @@ -215,6 +215,7 @@ export struct MultiPictureDetailPageComponent {
.width('100%')
.height(44)
.zIndex(10)
.margin({top:`${this.topSafeHeight + 12}px`})
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
... ... @@ -235,8 +236,17 @@ export struct MultiPictureDetailPageComponent {
.cachedCount(1)
.indicator(false)
.displayCount(1)
.onAnimationEnd(event => {
router.back()
.onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
console.info("onGestureSwipe current offset: " + extraInfo.currentOffset)
this.currentOffset = Math.abs(extraInfo.currentOffset)
})
.onTouch((event: TouchEvent) => {
if(event.type === 1) {
// if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) {
if(this.currentOffset > 160) {
router.back()
}
}
})
})
}
... ... @@ -283,47 +293,52 @@ export struct MultiPictureDetailPageComponent {
direction: FlexDirection.Column,
justifyContent: FlexAlign.Start
}) {
Text() {
Span(`${this.swiperIndex + 1}`)
.fontSize(24)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(28)
Span(`/${this.contentDetailData?.photoList?.length}`)
if(this.contentDetailData?.photoList?.length) {
Text() {
Span(`${this.swiperIndex + 1}`)
.fontSize(24)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(28)
Span(`/${this.contentDetailData?.photoList?.length}`)
.fontSize(14)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(19)
}
.fontColor(Color.White)
.margin(4)
}
if(this.contentDetailData.newsTitle) {
Text(`${this.contentDetailData.newsTitle}`)
.fontColor(Color.White)
.fontSize(16)
.fontFamily('PingFang SC-Semibold')
.fontWeight(600)
.lineHeight(24)
.margin({
top: 4,
left: 0,
bottom: 4,
right: 0
})
}
if(this.contentDetailData.photoList?.[this.swiperIndex].picDesc) {
Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
.fontColor(Color.White)
.fontSize(14)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(19)
.fontFamily('PingFang SC-Regular')
.fontWeight(400)
.lineHeight(22)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({
top: 4,
left: 0,
bottom: 4,
right: 18
})
.maxLines(32)
}
.fontColor(Color.White)
.margin(4)
Text(`${this.contentDetailData.newsTitle}`)
.fontColor(Color.White)
.fontSize(16)
.fontFamily('PingFang SC-Semibold')
.fontWeight(600)
.lineHeight(24)
.margin({
top: 4,
left: 0,
bottom: 4,
right: 0
})
Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
.fontColor(Color.White)
.fontSize(14)
.fontFamily('PingFang SC-Regular')
.fontWeight(400)
.lineHeight(22)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({
top: 4,
left: 0,
bottom: 4,
right: 18
})
.maxLines(16)
}
}
.width('100%')
... ... @@ -346,28 +361,32 @@ export struct MultiPictureDetailPageComponent {
direction: FlexDirection.Row,
justifyContent: FlexAlign.SpaceBetween
}) {
Text() {
Span(`${this.swiperIndex + 1}`)
.fontSize(24)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(28)
Span(`/${this.contentDetailData?.photoList?.length}`)
.fontSize(14)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(19)
if(this.contentDetailData?.photoList?.length) {
Text() {
Span(`${this.swiperIndex + 1}`)
.fontSize(24)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(28)
Span(`/${this.contentDetailData?.photoList?.length}`)
.fontSize(14)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(19)
}
.fontColor(Color.White)
.margin(4)
}
.fontColor(Color.White)
.margin(4)
ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
.margin({
top: 8,
left: 18,
bottom: 24,
right: 18
})
if(this.contentDetailData.photoList?.[this.swiperIndex].picPath) {
ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
.margin({
top: 8,
left: 18,
bottom: 24,
right: 18
})
}
}
}
.width('100%')
... ...
... ... @@ -26,7 +26,6 @@ struct MultiPictureDetailPage {
})
}
}
.padding({top:44})
.backgroundColor(Color.Black)
}
... ... @@ -57,6 +56,12 @@ struct MultiPictureDetailPage {
Logger.info(TAG, 'onBackPress');
}
aboutToDisappear(): void {
console.log(TAG, 'aboutToDisappear')
this.closeFullScreen()
}
/**
* 开启沉浸式
* TODO:颜色待根据业务接口修改
... ... @@ -67,11 +72,6 @@ struct MultiPictureDetailPage {
// WindowModel.shared.setWindowSystemBarEnable([])
}
aboutToDisappear(): void {
console.log(TAG, 'aboutToDisappear')
this.closeFullScreen()
}
/**
* 关闭沉浸式
* TODO:颜色待根据业务接口修改
... ...