developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
王士厅
ffe20247 1 parent 53bcea14

图集滑动优化

Inline Side-by-side
Showing 1 changed file with 334 additions and 307 deletions
@@ -114,7 +114,32 @@ export struct MultiPictureDetailPageComponent { @@ -114,7 +114,32 @@ export struct MultiPictureDetailPageComponent {
114 114
115 build() { 115 build() {
116 RelativeContainer() { 116 RelativeContainer() {
117 - this.init() 117 + if (this.contentDetailData.rmhPlatform == 1) {
  118 + this.rmh()
  119 + }
  120 + if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) {
  121 + this.imgSwiper()
  122 + }
  123 + if (this.netStatus !== undefined) {
  124 + this.noNet()
  125 + }
  126 + if (this.isOffLine) {
  127 + this.offLine()
  128 + }
  129 + Column() {
  130 + if (!this.showDownload) {
  131 + this.NShowDownload()
  132 + }
  133 + if (this.showDownload) {
  134 + this.YShowDownload()
  135 + }
  136 + }
  137 + .zIndex(10)
  138 + .id('e_swiper_bottom')
  139 + .alignRules({
  140 + bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
  141 + middle: { anchor: "__container__", align: HorizontalAlign.Center }
  142 + })
118 CommentDialogView({ 143 CommentDialogView({
119 index: $index, 144 index: $index,
120 currentIndex: $currentIndex, 145 currentIndex: $currentIndex,
@@ -131,323 +156,215 @@ export struct MultiPictureDetailPageComponent { @@ -131,323 +156,215 @@ export struct MultiPictureDetailPageComponent {
131 } 156 }
132 157
133 @Builder 158 @Builder
134 - init() {  
135 - if (this.contentDetailData.rmhPlatform == 1) {  
136 - if (!this.showDownload) {  
137 - Row() {  
138 - Row({ space: 8 }) {  
139 - if (this.getImgUrl()) {  
140 - Row() {  
141 - Stack() {  
142 - Image(this.getImgUrl())  
143 - .borderRadius(18)  
144 - .aspectRatio(1)  
145 - .border({ width: 1, color: Color.White, style: BorderStyle.Solid })  
146 - .width(36)  
147 - .height(36)  
148 - .objectFit(ImageFit.Fill)  
149 - .interpolation(ImageInterpolation.High)  
150 - if (!StringUtils.isEmpty(this.contentDetailData.rmhInfo?.authIcon)) {  
151 - Stack() {  
152 - Image(this.contentDetailData.rmhInfo?.authIcon)  
153 - .width($r('app.float.vp_13'))  
154 - .height($r('app.float.vp_13'))  
155 - .objectFit(ImageFit.Cover)  
156 - }  
157 - .width(36)  
158 - .height(36)  
159 - .alignContent(Alignment.BottomEnd) 159 + rmh() {
  160 + if (!this.showDownload) {
  161 + Row() {
  162 + Row({ space: 8 }) {
  163 + if (this.getImgUrl()) {
  164 + Row() {
  165 + Stack() {
  166 + Image(this.getImgUrl())
  167 + .borderRadius(18)
  168 + .aspectRatio(1)
  169 + .border({ width: 1, color: Color.White, style: BorderStyle.Solid })
  170 + .width(36)
  171 + .height(36)
  172 + .objectFit(ImageFit.Fill)
  173 + .interpolation(ImageInterpolation.High)
  174 + if (!StringUtils.isEmpty(this.contentDetailData.rmhInfo?.authIcon)) {
  175 + Stack() {
  176 + Image(this.contentDetailData.rmhInfo?.authIcon)
  177 + .width($r('app.float.vp_13'))
  178 + .height($r('app.float.vp_13'))
  179 + .objectFit(ImageFit.Cover)
160 } 180 }
  181 + .width(36)
  182 + .height(36)
  183 + .alignContent(Alignment.BottomEnd)
161 } 184 }
162 - .width(36)  
163 - .height(36)  
164 - .alignContent(Alignment.Center)  
165 - .onClick(() => {  
166 - if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {  
167 - // 号主页  
168 - const params: Params = {  
169 - creatorId: this.contentDetailData.rmhInfo.rmhId,  
170 - pageID: ''  
171 - }  
172 - WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)  
173 - }  
174 -  
175 - })  
176 } 185 }
177 - .width('13%')  
178 - .height('100%')  
179 - } 186 + .width(36)
  187 + .height(36)
  188 + .alignContent(Alignment.Center)
  189 + .onClick(() => {
  190 + if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
  191 + // 号主页
  192 + const params: Params = {
  193 + creatorId: this.contentDetailData.rmhInfo.rmhId,
  194 + pageID: ''
  195 + }
  196 + WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
  197 + }
180 198
181 - Row() {  
182 - Flex({  
183 - direction: FlexDirection.Column,  
184 - justifyContent: FlexAlign.SpaceAround,  
185 - alignItems: ItemAlign.Start  
186 - }) {  
187 - Text(`${this.contentDetailData?.rmhInfo?.rmhName}`)  
188 - .fontColor(Color.White)  
189 - .fontSize(14)  
190 - .fontFamily('PingFang PingFang SC-Medium')  
191 - .fontWeight(500)  
192 - .lineHeight(17)  
193 - .margin(0)  
194 - .height(17)  
195 - Text(`${this.contentDetailData?.rmhInfo?.rmhDesc}`)  
196 - .fontColor(Color.White)  
197 - .fontSize(12)  
198 - .fontFamily('PingFang SC-Regular')  
199 - .fontWeight(400)  
200 - .lineHeight(14)  
201 - .height(14)  
202 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
203 - .margin(0)  
204 - .maxLines(1)  
205 - } 199 + })
206 } 200 }
207 - .width('81%') 201 + .width('13%')
208 .height('100%') 202 .height('100%')
209 } 203 }
210 - .width('74.4%')  
211 - .height('100%')  
212 - .margin({  
213 - top: 0,  
214 - bottom: 0,  
215 - left: 16,  
216 - right: 0  
217 - })  
218 - .onClick(() => {  
219 - if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {  
220 - // 号主页  
221 - const params: Params = {  
222 - creatorId: this.contentDetailData.rmhInfo.rmhId,  
223 - pageID: ''  
224 - }  
225 - WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)  
226 - }  
227 -  
228 - })  
229 204
230 Row() { 205 Row() {
231 - if (this.followStatus == '0') {  
232 - Button({ type: ButtonType.Normal, stateEffect: true }) {  
233 - Row() {  
234 - Text('+关注').fontSize(12).fontColor(0xffffff)  
235 - }.alignItems(VerticalAlign.Center)  
236 - }  
237 - .borderRadius(4)  
238 - .backgroundColor('#ED2800')  
239 - .width(48)  
240 - .height(24)  
241 - .onClick(() => {  
242 - this.handleAccention()  
243 - })  
244 - } else {  
245 - Button({ type: ButtonType.Normal, stateEffect: true }) {  
246 - Row() {  
247 - Text('已关注').fontSize(12).fontColor(0xffffff)  
248 - }.alignItems(VerticalAlign.Center)  
249 - }  
250 - .borderRadius(4)  
251 - .backgroundColor('#333333')  
252 - .width(54)  
253 - .height(24)  
254 - .onClick(() => {  
255 - this.handleAccention()  
256 - }) 206 + Flex({
  207 + direction: FlexDirection.Column,
  208 + justifyContent: FlexAlign.SpaceAround,
  209 + alignItems: ItemAlign.Start
  210 + }) {
  211 + Text(`${this.contentDetailData?.rmhInfo?.rmhName}`)
  212 + .fontColor(Color.White)
  213 + .fontSize(14)
  214 + .fontFamily('PingFang PingFang SC-Medium')
  215 + .fontWeight(500)
  216 + .lineHeight(17)
  217 + .margin(0)
  218 + .height(17)
  219 + Text(`${this.contentDetailData?.rmhInfo?.rmhDesc}`)
  220 + .fontColor(Color.White)
  221 + .fontSize(12)
  222 + .fontFamily('PingFang SC-Regular')
  223 + .fontWeight(400)
  224 + .lineHeight(14)
  225 + .height(14)
  226 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  227 + .margin(0)
  228 + .maxLines(1)
257 } 229 }
258 -  
259 } 230 }
260 - .justifyContent(FlexAlign.Center)  
261 - .alignItems(VerticalAlign.Center)  
262 - .width('21.6%') 231 + .width('81%')
263 .height('100%') 232 .height('100%')
264 } 233 }
265 - .width('100%')  
266 - .height(44)  
267 - .zIndex(10)  
268 - .margin({ top: `${this.topSafeHeight + 12}px` })  
269 - .alignRules({  
270 - top: { anchor: "__container__", align: VerticalAlign.Top },  
271 - middle: { anchor: "__container__", align: HorizontalAlign.Center } 234 + .width('74.4%')
  235 + .height('100%')
  236 + .margin({
  237 + top: 0,
  238 + bottom: 0,
  239 + left: 16,
  240 + right: 0
272 }) 241 })
273 - .id('e_attention')  
274 - .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(  
275 - TransitionEffect.translate({ x: 0, y: `-${this.topSafeHeight + 12}px` })  
276 - ))  
277 - }  
278 -  
279 - }  
280 - if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) {  
281 - Swiper(this.swiperController) {  
282 - ForEach(this.contentDetailData.photoList, (item: PhotoListBean) => {  
283 - Swiper(this.swiperControllerItem) {  
284 - MultiPictureDetailItemComponent({ MultiPictureDetailItem: item }) 242 + .onClick(() => {
  243 + if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
  244 + // 号主页
  245 + const params: Params = {
  246 + creatorId: this.contentDetailData.rmhInfo.rmhId,
  247 + pageID: ''
  248 + }
  249 + WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
285 } 250 }
286 - .width('100%')  
287 - .height('100%')  
288 - .vertical(true)  
289 - .autoPlay(false)  
290 - .cachedCount(1)  
291 - .indicator(false)  
292 - .displayCount(1)  
293 - .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {  
294 - console.info("onGestureSwipe current offset: " + extraInfo.currentOffset)  
295 - this.currentOffset = Math.abs(extraInfo.currentOffset)  
296 - })  
297 - .onTouch((event: TouchEvent) => {  
298 - if (this.duration === 0) {  
299 - this.duration = 500 251 +
  252 + })
  253 +
  254 + Row() {
  255 + if (this.followStatus == '0') {
  256 + Button({ type: ButtonType.Normal, stateEffect: true }) {
  257 + Row() {
  258 + Text('+关注').fontSize(12).fontColor(0xffffff)
  259 + }.alignItems(VerticalAlign.Center)
300 } 260 }
301 - if (event.type === 1) {  
302 - // if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) {  
303 - if (this.currentOffset > 160) {  
304 - router.back()  
305 - } 261 + .borderRadius(4)
  262 + .backgroundColor('#ED2800')
  263 + .width(48)
  264 + .height(24)
  265 + .onClick(() => {
  266 + this.handleAccention()
  267 + })
  268 + } else {
  269 + Button({ type: ButtonType.Normal, stateEffect: true }) {
  270 + Row() {
  271 + Text('已关注').fontSize(12).fontColor(0xffffff)
  272 + }.alignItems(VerticalAlign.Center)
306 } 273 }
307 - })  
308 - }) 274 + .borderRadius(4)
  275 + .backgroundColor('#333333')
  276 + .width(54)
  277 + .height(24)
  278 + .onClick(() => {
  279 + this.handleAccention()
  280 + })
  281 + }
  282 +
  283 + }
  284 + .justifyContent(FlexAlign.Center)
  285 + .alignItems(VerticalAlign.Center)
  286 + .width('21.6%')
  287 + .height('100%')
309 } 288 }
310 - .index(this.swiperIndex)  
311 .width('100%') 289 .width('100%')
312 - .height('100%')  
313 - .vertical(false)  
314 - .autoPlay(false)  
315 - .indicator(false)  
316 - .displayCount(1)  
317 - .loop(false)  
318 - .effectMode(EdgeEffect.None)  
319 - .id('e_swiper_content') 290 + .height(44)
  291 + .zIndex(10)
  292 + .margin({ top: `${this.topSafeHeight + 12}px` })
320 .alignRules({ 293 .alignRules({
321 - center: { anchor: "__container__", align: VerticalAlign.Center }, 294 + top: { anchor: "__container__", align: VerticalAlign.Top },
322 middle: { anchor: "__container__", align: HorizontalAlign.Center } 295 middle: { anchor: "__container__", align: HorizontalAlign.Center }
323 }) 296 })
324 - .zIndex(1)  
325 - .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {  
326 - this.swiperIndex = targetIndex  
327 - })  
328 - .onClick(() => {  
329 - this.showDownload = !this.showDownload  
330 - })  
331 - }  
332 - if (this.netStatus !== undefined) {  
333 - EmptyComponent({  
334 - emptyType: 1, emptyButton: true, retry: () => {  
335 - this.getContentDetailData()  
336 - }  
337 - })  
338 - .id('e_empty_content')  
339 - .alignRules({  
340 - center: { anchor: "__container__", align: VerticalAlign.Center },  
341 - middle: { anchor: "__container__", align: HorizontalAlign.Center }  
342 - }) 297 + .id('e_attention')
  298 + .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
  299 + TransitionEffect.translate({ x: 0, y: `-${this.topSafeHeight + 12}px` })
  300 + ))
343 } 301 }
344 - if (this.isOffLine) {  
345 - EmptyComponent({  
346 - emptyType: 15, emptyButton: true, retry: () => {  
347 - this.getContentDetailData 302 + }
  303 +
  304 + @Builder
  305 + imgSwiper() {
  306 + Swiper(this.swiperController) {
  307 + ForEach(this.contentDetailData.photoList, (item: PhotoListBean) => {
  308 + Swiper(this.swiperControllerItem) {
  309 + MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
348 } 310 }
349 - })  
350 - .id('e_empty_content')  
351 - .alignRules({  
352 - center: { anchor: "__container__", align: VerticalAlign.Center },  
353 - middle: { anchor: "__container__", align: HorizontalAlign.Center } 311 + .width('100%')
  312 + .height('100%')
  313 + .vertical(true)
  314 + .autoPlay(false)
  315 + .cachedCount(1)
  316 + .indicator(false)
  317 + .displayCount(1)
  318 + .loop(false)
  319 + .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
  320 + console.info("onGestureSwipe current offset: " + extraInfo.currentOffset)
  321 + this.currentOffset = Math.abs(extraInfo.currentOffset)
354 }) 322 })
355 - .backgroundColor(Color.Black)  
356 - }  
357 - Column() {  
358 - if (!this.showDownload) {  
359 - Column() {  
360 - Row() {  
361 - Scroll(this.scroller) {  
362 - Row() {  
363 - Flex({  
364 - direction: FlexDirection.Column,  
365 - justifyContent: FlexAlign.Start  
366 - }) {  
367 - if (this.contentDetailData?.photoList?.length) {  
368 - Text() {  
369 - Span(`${this.swiperIndex + 1}`)  
370 - .fontSize(24)  
371 - .fontFamily('PingFang SC-Medium')  
372 - .fontWeight(500)  
373 - .lineHeight(28)  
374 - Span(`/${this.contentDetailData?.photoList?.length}`)  
375 - .fontSize(14)  
376 - .fontFamily('PingFang SC-Medium')  
377 - .fontWeight(500)  
378 - .lineHeight(19)  
379 - }  
380 - .fontColor(Color.White)  
381 - .margin({  
382 - top: 4,  
383 - left: 18,  
384 - bottom: 4,  
385 - right: 4  
386 - })  
387 - }  
388 - if (this.contentDetailData.newsTitle) {  
389 - Text(`${this.contentDetailData.newsTitle}`)  
390 - .fontColor(Color.White)  
391 - .fontSize(16)  
392 - .fontFamily('PingFang SC-Semibold')  
393 - .fontWeight(600)  
394 - .lineHeight(24)  
395 - .margin({  
396 - top: 4,  
397 - left: 18,  
398 - bottom: 4,  
399 - right: 18  
400 - })  
401 - }  
402 - if (this.contentDetailData.photoList?.[this.swiperIndex].picDesc) {  
403 - Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)  
404 - .fontColor(Color.White)  
405 - .fontSize(14)  
406 - .fontFamily('PingFang SC-Regular')  
407 - .fontWeight(400)  
408 - .lineHeight(22)  
409 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
410 - .margin({  
411 - top: 4,  
412 - left: 0,  
413 - bottom: 4,  
414 - right: 18  
415 - })  
416 - .maxLines(32)  
417 - }  
418 - }  
419 - }  
420 - .width('100%')  
421 - }  
422 - .scrollable(ScrollDirection.Vertical)  
423 - .scrollBarWidth(0)  
424 - .height(px2vp(this.titleHeight))  
425 - .align(Alignment.Bottom) 323 + .onTouch((event: TouchEvent) => {
  324 + if (this.duration === 0) {
  325 + this.duration = 500
426 } 326 }
427 -  
428 - OperRowListView({  
429 - contentDetailData: this.contentDetailData,  
430 - publishCommentModel: this.publishCommentModel,  
431 - operationButtonList: this.operationButtonList,  
432 - styleType: 2,  
433 - componentType: 5,  
434 - pageComponentType: 3,  
435 - onCommentIconClick: () => {  
436 - this.showCommentList = true 327 + if (event.type === 1) {
  328 + // if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) {
  329 + if (this.currentOffset > 160) {
  330 + router.back()
437 } 331 }
438 - }) 332 + }
  333 + })
  334 + })
  335 + }
  336 + .index(this.swiperIndex)
  337 + .width('100%')
  338 + .height('100%')
  339 + .vertical(false)
  340 + .autoPlay(false)
  341 + .indicator(false)
  342 + .displayCount(1)
  343 + .loop(false)
  344 + .effectMode(EdgeEffect.Spring)
  345 + .id('e_swiper_content')
  346 + .alignRules({
  347 + center: { anchor: "__container__", align: VerticalAlign.Center },
  348 + middle: { anchor: "__container__", align: HorizontalAlign.Center }
  349 + })
  350 + .zIndex(1)
  351 + .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
  352 + this.swiperIndex = targetIndex
  353 + })
  354 + .onClick(() => {
  355 + this.showDownload = !this.showDownload
  356 + })
  357 + }
439 358
440 - }  
441 - .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(  
442 - TransitionEffect.translate({ x: 0, y: `-${this.bottomSafeHeight}px` })  
443 - ))  
444 - }  
445 - if (this.showDownload) {  
446 - Column() { 359 + @Builder
  360 + NShowDownload() {
  361 + Column() {
  362 + Row() {
  363 + Scroll(this.scroller) {
447 Row() { 364 Row() {
448 Flex({ 365 Flex({
449 - direction: FlexDirection.Row,  
450 - justifyContent: FlexAlign.SpaceBetween 366 + direction: FlexDirection.Column,
  367 + justifyContent: FlexAlign.Start
451 }) { 368 }) {
452 if (this.contentDetailData?.photoList?.length) { 369 if (this.contentDetailData?.photoList?.length) {
453 Text() { 370 Text() {
@@ -463,38 +380,148 @@ export struct MultiPictureDetailPageComponent { @@ -463,38 +380,148 @@ export struct MultiPictureDetailPageComponent {
463 .lineHeight(19) 380 .lineHeight(19)
464 } 381 }
465 .fontColor(Color.White) 382 .fontColor(Color.White)
466 - .margin(4) 383 + .margin({
  384 + top: 4,
  385 + left: 18,
  386 + bottom: 4,
  387 + right: 4
  388 + })
467 } 389 }
468 -  
469 - if (this.contentDetailData.photoList?.[this.swiperIndex].picPath) {  
470 - ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath }) 390 + if (this.contentDetailData.newsTitle) {
  391 + Text(`${this.contentDetailData.newsTitle}`)
  392 + .fontColor(Color.White)
  393 + .fontSize(16)
  394 + .fontFamily('PingFang SC-Semibold')
  395 + .fontWeight(600)
  396 + .lineHeight(24)
471 .margin({ 397 .margin({
472 - top: 8, 398 + top: 4,
473 left: 18, 399 left: 18,
474 - bottom: 24, 400 + bottom: 4,
  401 + right: 18
  402 + })
  403 + }
  404 + if (this.contentDetailData.photoList?.[this.swiperIndex].picDesc) {
  405 + Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
  406 + .fontColor(Color.White)
  407 + .fontSize(14)
  408 + .fontFamily('PingFang SC-Regular')
  409 + .fontWeight(400)
  410 + .lineHeight(22)
  411 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  412 + .margin({
  413 + top: 4,
  414 + left: 0,
  415 + bottom: 4,
475 right: 18 416 right: 18
476 }) 417 })
477 - .parallelGesture(  
478 - TapGesture()  
479 - .onAction((event: GestureEvent) => {  
480 - TrackingContent.download(1,TrackConstants.PageName.Atlas_Detail,TrackConstants.PageName.Atlas_Detail,this.pageParam)  
481 - })) 418 + .maxLines(32)
482 } 419 }
483 } 420 }
484 } 421 }
485 .width('100%') 422 .width('100%')
486 } 423 }
487 - .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(  
488 - TransitionEffect.translate({ x: 0, y: `${this.bottomSafeHeight}px` })  
489 - )) 424 + .scrollable(ScrollDirection.Vertical)
  425 + .scrollBarWidth(0)
  426 + .constraintSize({
  427 + maxHeight: px2vp(this.titleHeight)
  428 + })
  429 + .align(Alignment.Bottom)
490 } 430 }
  431 +
  432 + OperRowListView({
  433 + contentDetailData: this.contentDetailData,
  434 + publishCommentModel: this.publishCommentModel,
  435 + operationButtonList: this.operationButtonList,
  436 + styleType: 2,
  437 + componentType: 5,
  438 + pageComponentType: 3,
  439 + onCommentIconClick: () => {
  440 + this.showCommentList = true
  441 + }
  442 + })
  443 +
491 } 444 }
492 - .zIndex(10)  
493 - .id('e_swiper_bottom')  
494 - .alignRules({  
495 - bottom: { anchor: "__container__", align: VerticalAlign.Bottom },  
496 - middle: { anchor: "__container__", align: HorizontalAlign.Center } 445 + .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
  446 + TransitionEffect.translate({ x: 0, y: `-${this.bottomSafeHeight}px` })
  447 + ))
  448 + }
  449 +
  450 + @Builder
  451 + YShowDownload() {
  452 + Column() {
  453 + Row() {
  454 + Flex({
  455 + direction: FlexDirection.Row,
  456 + justifyContent: FlexAlign.SpaceBetween
  457 + }) {
  458 + if (this.contentDetailData?.photoList?.length) {
  459 + Text() {
  460 + Span(`${this.swiperIndex + 1}`)
  461 + .fontSize(24)
  462 + .fontFamily('PingFang SC-Medium')
  463 + .fontWeight(500)
  464 + .lineHeight(28)
  465 + Span(`/${this.contentDetailData?.photoList?.length}`)
  466 + .fontSize(14)
  467 + .fontFamily('PingFang SC-Medium')
  468 + .fontWeight(500)
  469 + .lineHeight(19)
  470 + }
  471 + .fontColor(Color.White)
  472 + .margin(4)
  473 + }
  474 +
  475 + if (this.contentDetailData.photoList?.[this.swiperIndex].picPath) {
  476 + ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
  477 + .margin({
  478 + top: 8,
  479 + left: 18,
  480 + bottom: 24,
  481 + right: 18
  482 + })
  483 + .parallelGesture(
  484 + TapGesture()
  485 + .onAction((event: GestureEvent) => {
  486 + TrackingContent.download(1,TrackConstants.PageName.Atlas_Detail,TrackConstants.PageName.Atlas_Detail,this.pageParam)
  487 + }))
  488 + }
  489 + }
  490 + }
  491 + .width('100%')
  492 + }
  493 + .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
  494 + TransitionEffect.translate({ x: 0, y: `${this.bottomSafeHeight}px` })
  495 + ))
  496 + }
  497 +
  498 + @Builder
  499 + noNet() {
  500 + EmptyComponent({
  501 + emptyType: 1, emptyButton: true, retry: () => {
  502 + this.getContentDetailData()
  503 + }
  504 + })
  505 + .id('e_empty_content')
  506 + .alignRules({
  507 + center: { anchor: "__container__", align: VerticalAlign.Center },
  508 + middle: { anchor: "__container__", align: HorizontalAlign.Center }
  509 + })
  510 + }
  511 +
  512 + @Builder
  513 + offLine() {
  514 + EmptyComponent({
  515 + emptyType: 15, emptyButton: true, retry: () => {
  516 + this.getContentDetailData
  517 + }
497 }) 518 })
  519 + .id('e_empty_content')
  520 + .alignRules({
  521 + center: { anchor: "__container__", align: VerticalAlign.Center },
  522 + middle: { anchor: "__container__", align: HorizontalAlign.Center }
  523 + })
  524 + .backgroundColor(Color.Black)
498 } 525 }
499 526
500 getContentDetailData() { 527 getContentDetailData() {