developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhenghy
94a8ecde 1 parent b5a6c84e

图集沉浸式

Inline Side-by-side
Showing 1 changed file with 53 additions and 29 deletions
... ... @@ -28,7 +28,7 @@ export struct MultiPictureDetailPageComponent {
private picWidth: number = 0
@State picHeight: number = 0
@State titleHeight: number = 0
@State contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
@State contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
@Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
private swiperController: SwiperController = new SwiperController()
@State swiperIndex: number = 0;
... ... @@ -37,13 +37,12 @@ export struct MultiPictureDetailPageComponent {
//watch监听页码回调
onCurrentPageNumUpdated(): void {
Logger.info(TAG, `currentPageNum：${this.currentPageNum}`, )
Logger.info(TAG, `currentPageNum：${this.currentPageNum}`,)
let _swiperIndex = Number.parseInt(this.currentPageNum)
Logger.info(TAG, `_swiperIndex：${_swiperIndex}`)
this.swiperIndex = _swiperIndex > 0 ? _swiperIndex - 1 : _swiperIndex
}
async aboutToAppear() {
//获取宽高尺寸
this.screenWidth = this.displayTool.width
... ... @@ -72,7 +71,7 @@ export struct MultiPictureDetailPageComponent {
if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) {
Swiper(this.swiperController) {
ForEach(this.contentDetailData.photoList, (item: PhotoListBean) => {
MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
})
}
.index(this.swiperIndex)
... ... @@ -91,10 +90,11 @@ export struct MultiPictureDetailPageComponent {
.onChange((index: number) => {
this.swiperIndex = index
})
if(this.contentDetailData.rmhPlatform == 1) {
if (this.contentDetailData.rmhPlatform == 1) {
Row() {
Row(){
Row({space: 8}) {
Row() {
Row({ space: 8 }) {
Image(this.contentDetailData?.rmhInfo?.rmhHeadUrl)
.borderRadius('50%')
.alt($r('app.media.picture_loading'))
... ... @@ -105,6 +105,7 @@ export struct MultiPictureDetailPageComponent {
}
.width('13%')
.height('100%')
Row() {
Flex({
direction: FlexDirection.Column,
... ... @@ -124,7 +125,7 @@ export struct MultiPictureDetailPageComponent {
.fontWeight(400)
.lineHeight(14)
.textOverflow({ overflow: TextOverflow.Clip })
.margin (0)
.margin(0)
}
}
.width('81%')
... ... @@ -136,10 +137,11 @@ export struct MultiPictureDetailPageComponent {
top: 0,
bottom: 0,
left: 16,
right:0
right: 0
})
if(this.followStatus == '0') {
Row(){
if (this.followStatus == '0') {
Row() {
Button('+关注', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(4)
.backgroundColor('#ED2800')
... ... @@ -152,7 +154,7 @@ export struct MultiPictureDetailPageComponent {
top: 10,
bottom: 10,
left: 16,
right:16
right: 16
})
.fontSize(12)
.fontColor(Color.White)
... ... @@ -169,7 +171,7 @@ export struct MultiPictureDetailPageComponent {
})
.id('e_attention')
}
Row(){
Row() {
Scroll(this.scroller) {
Row() {
Flex({
... ... @@ -177,22 +179,38 @@ export struct MultiPictureDetailPageComponent {
justifyContent: FlexAlign.Start
}) {
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)
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)
Text(`${this.contentDetailData.newsTitle}`).fontColor(Color.White).fontSize(16).fontFamily('PingFang SC-Semibold')
.fontWeight(600).lineHeight(24)
.margin ({
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)
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 ({
.margin({
top: 4,
left: 0,
bottom: 4,
... ... @@ -202,7 +220,7 @@ export struct MultiPictureDetailPageComponent {
}
}
.width('100%')
.margin ({
.margin({
top: 8,
left: 18,
bottom: 24,
... ... @@ -227,13 +245,15 @@ export struct MultiPictureDetailPageComponent {
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
.width('100%').height(56).margin({
top: 16,
left: 16,
right:16,
bottom: 0
})
.border({ width: {top: 0.5}, color: '#FFFFFF' })
.width('100%')
.height(56)
.margin({
top: 16,
left: 16,
right: 16,
bottom: 0
})
.border({ width: { top: 0.5 }, color: '#FFFFFF' })
.id('e_oper_row')
}
}
... ... @@ -241,6 +261,9 @@ export struct MultiPictureDetailPageComponent {
.height('100%')
.backgroundColor(Color.Black)
.id('e_picture_container')
// 设置顶部绘制延伸到状态栏
// 设置底部绘制延伸到导航条
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}
private async getContentDetailData() {
... ... @@ -285,6 +308,7 @@ export struct MultiPictureDetailPageComponent {
}
}
/**
* 关注号主
*/
... ...