developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
王士厅
b2eb5c44 1 parent c4462a0f

图集点击添加动画

Inline Side-by-side
Showing 1 changed file with 221 additions and 202 deletions
@@ -47,8 +47,10 @@ export struct MultiPictureDetailPageComponent { @@ -47,8 +47,10 @@ export struct MultiPictureDetailPageComponent {
47 @State publishCommentModel: publishCommentModel = new publishCommentModel() 47 @State publishCommentModel: publishCommentModel = new publishCommentModel()
48 @State operationButtonList: string[] = ['comment', 'like', 'collect', 'share'] 48 @State operationButtonList: string[] = ['comment', 'like', 'collect', 'share']
49 @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') as number; 49 @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') as number;
  50 + @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') as number;
50 @State windowHeight: number = AppStorage.get<number>('windowHeight') as number; 51 @State windowHeight: number = AppStorage.get<number>('windowHeight') as number;
51 @State currentOffset:number = 0 52 @State currentOffset:number = 0
  53 + @State duration:number = 0
52 54
53 //watch监听页码回调 55 //watch监听页码回调
54 onCurrentPageNumUpdated(): void { 56 onCurrentPageNumUpdated(): void {
@@ -81,6 +83,7 @@ export struct MultiPictureDetailPageComponent { @@ -81,6 +83,7 @@ export struct MultiPictureDetailPageComponent {
81 } 83 }
82 } 84 }
83 85
  86 +
84 aboutToDisappear() { 87 aboutToDisappear() {
85 88
86 } 89 }
@@ -98,130 +101,135 @@ export struct MultiPictureDetailPageComponent { @@ -98,130 +101,135 @@ export struct MultiPictureDetailPageComponent {
98 @Builder 101 @Builder
99 init() { 102 init() {
100 if (this.contentDetailData.rmhPlatform == 1) { 103 if (this.contentDetailData.rmhPlatform == 1) {
101 - Row() {  
102 - Row({ space: 8 }) {  
103 - if (this.getImgUrl()){  
104 - Row() {  
105 - Stack() {  
106 - Image(this.getImgUrl())  
107 - .borderRadius(18)  
108 - .aspectRatio(1)  
109 - .border({ width: 1, color: Color.White, style: BorderStyle.Solid })  
110 - .width(36)  
111 - .height(36)  
112 - .objectFit(ImageFit.Fill)  
113 - .interpolation(ImageInterpolation.High)  
114 - if(!StringUtils.isEmpty(this.contentDetailData.rmhInfo?.authIcon)){  
115 - Stack() {  
116 - Image(this.contentDetailData.rmhInfo?.authIcon)  
117 - .width($r('app.float.vp_13'))  
118 - .height($r('app.float.vp_13'))  
119 - .objectFit(ImageFit.Cover) 104 + if(!this.showDownload) {
  105 + Row() {
  106 + Row({ space: 8 }) {
  107 + if (this.getImgUrl()){
  108 + Row() {
  109 + Stack() {
  110 + Image(this.getImgUrl())
  111 + .borderRadius(18)
  112 + .aspectRatio(1)
  113 + .border({ width: 1, color: Color.White, style: BorderStyle.Solid })
  114 + .width(36)
  115 + .height(36)
  116 + .objectFit(ImageFit.Fill)
  117 + .interpolation(ImageInterpolation.High)
  118 + if(!StringUtils.isEmpty(this.contentDetailData.rmhInfo?.authIcon)){
  119 + Stack() {
  120 + Image(this.contentDetailData.rmhInfo?.authIcon)
  121 + .width($r('app.float.vp_13'))
  122 + .height($r('app.float.vp_13'))
  123 + .objectFit(ImageFit.Cover)
  124 + }
  125 + .width(36)
  126 + .height(36)
  127 + .alignContent(Alignment.BottomEnd)
120 } 128 }
121 - .width(36)  
122 - .height(36)  
123 - .alignContent(Alignment.BottomEnd)  
124 } 129 }
125 - }  
126 - .width(36)  
127 - .height(36)  
128 - .alignContent(Alignment.Center)  
129 - .onClick(() => {  
130 - if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {  
131 - // 号主页  
132 - const params: Params = {  
133 - creatorId: this.contentDetailData.rmhInfo.rmhId,  
134 - pageID: '' 130 + .width(36)
  131 + .height(36)
  132 + .alignContent(Alignment.Center)
  133 + .onClick(() => {
  134 + if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
  135 + // 号主页
  136 + const params: Params = {
  137 + creatorId: this.contentDetailData.rmhInfo.rmhId,
  138 + pageID: ''
  139 + }
  140 + WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
135 } 141 }
136 - WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)  
137 - }  
138 142
139 - }) 143 + })
  144 + }
  145 + .width('13%')
  146 + .height('100%')
  147 + }
  148 +
  149 + Row() {
  150 + Flex({
  151 + direction: FlexDirection.Column,
  152 + justifyContent: FlexAlign.SpaceAround,
  153 + alignItems: ItemAlign.Start
  154 + }) {
  155 + Text(`${this.contentDetailData?.rmhInfo?.rmhName}`)
  156 + .fontColor(Color.White)
  157 + .fontSize(14)
  158 + .fontFamily('PingFang PingFang SC-Medium')
  159 + .fontWeight(500)
  160 + .lineHeight(17)
  161 + .margin(0)
  162 + .height(17)
  163 + Text(`${this.contentDetailData?.rmhInfo?.rmhDesc}`)
  164 + .fontColor(Color.White)
  165 + .fontSize(12)
  166 + .fontFamily('PingFang SC-Regular')
  167 + .fontWeight(400)
  168 + .lineHeight(14)
  169 + .height(14)
  170 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  171 + .margin(0)
  172 + .maxLines(1)
  173 + }
140 } 174 }
141 - .width('13%') 175 + .width('81%')
142 .height('100%') 176 .height('100%')
143 } 177 }
  178 + .width('74.4%')
  179 + .height('100%')
  180 + .margin({
  181 + top: 0,
  182 + bottom: 0,
  183 + left: 16,
  184 + right: 0
  185 + })
144 186
145 Row() { 187 Row() {
146 - Flex({  
147 - direction: FlexDirection.Column,  
148 - justifyContent: FlexAlign.SpaceAround,  
149 - alignItems: ItemAlign.Start  
150 - }) {  
151 - Text(`${this.contentDetailData?.rmhInfo?.rmhName}`)  
152 - .fontColor(Color.White)  
153 - .fontSize(14)  
154 - .fontFamily('PingFang PingFang SC-Medium')  
155 - .fontWeight(500)  
156 - .lineHeight(17)  
157 - .margin(0)  
158 - .height(17)  
159 - Text(`${this.contentDetailData?.rmhInfo?.rmhDesc}`)  
160 - .fontColor(Color.White)  
161 - .fontSize(12)  
162 - .fontFamily('PingFang SC-Regular')  
163 - .fontWeight(400)  
164 - .lineHeight(14)  
165 - .height(14)  
166 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
167 - .margin(0)  
168 - .maxLines(1) 188 + if (this.followStatus == '0') {
  189 + Button({ type: ButtonType.Normal, stateEffect: true }) {
  190 + Row() {
  191 + Text('+关注').fontSize(12).fontColor(0xffffff)
  192 + }.alignItems(VerticalAlign.Center)
  193 + }
  194 + .borderRadius(4)
  195 + .backgroundColor('#ED2800')
  196 + .width(48)
  197 + .height(24)
  198 + .onClick(() => {
  199 + this.handleAccention()
  200 + })
  201 + } else {
  202 + Button({ type: ButtonType.Normal, stateEffect: true }) {
  203 + Row() {
  204 + Text('已关注').fontSize(12).fontColor(0xffffff)
  205 + }.alignItems(VerticalAlign.Center)
  206 + }
  207 + .borderRadius(4)
  208 + .backgroundColor('#333333')
  209 + .width(54)
  210 + .height(24)
169 } 211 }
  212 +
170 } 213 }
171 - .width('81%') 214 + .justifyContent(FlexAlign.Center)
  215 + .alignItems(VerticalAlign.Center)
  216 + .width('21.6%')
172 .height('100%') 217 .height('100%')
173 } 218 }
174 - .width('74.4%')  
175 - .height('100%')  
176 - .margin({  
177 - top: 0,  
178 - bottom: 0,  
179 - left: 16,  
180 - right: 0 219 + .width('100%')
  220 + .height(44)
  221 + .zIndex(10)
  222 + .margin({top:`${this.topSafeHeight + 12}px`})
  223 + .alignRules({
  224 + top: { anchor: "__container__", align: VerticalAlign.Top },
  225 + middle: { anchor: "__container__", align: HorizontalAlign.Center }
181 }) 226 })
182 -  
183 - Row() {  
184 - if (this.followStatus == '0') {  
185 - Button({ type: ButtonType.Normal, stateEffect: true }) {  
186 - Row() {  
187 - Text('+关注').fontSize(12).fontColor(0xffffff)  
188 - }.alignItems(VerticalAlign.Center)  
189 - }  
190 - .borderRadius(4)  
191 - .backgroundColor('#ED2800')  
192 - .width(48)  
193 - .height(24)  
194 - .onClick(() => {  
195 - this.handleAccention()  
196 - })  
197 - } else {  
198 - Button({ type: ButtonType.Normal, stateEffect: true }) {  
199 - Row() {  
200 - Text('已关注').fontSize(12).fontColor(0xffffff)  
201 - }.alignItems(VerticalAlign.Center)  
202 - }  
203 - .borderRadius(4)  
204 - .backgroundColor('#333333')  
205 - .width(54)  
206 - .height(24)  
207 - }  
208 -  
209 - }  
210 - .justifyContent(FlexAlign.Center)  
211 - .alignItems(VerticalAlign.Center)  
212 - .width('21.6%')  
213 - .height('100%') 227 + .id('e_attention')
  228 + .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
  229 + TransitionEffect.translate({ x: 0, y: `-${this.topSafeHeight + 12}px` })
  230 + ))
214 } 231 }
215 - .width('100%')  
216 - .height(44)  
217 - .zIndex(10)  
218 - .margin({top:`${this.topSafeHeight + 12}px`})  
219 - .alignRules({  
220 - top: { anchor: "__container__", align: VerticalAlign.Top },  
221 - middle: { anchor: "__container__", align: HorizontalAlign.Center }  
222 - })  
223 - .id('e_attention')  
224 - .visibility(!this.showDownload ? Visibility.Visible : Visibility.None) 232 +
225 } 233 }
226 if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) { 234 if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) {
227 Swiper(this.swiperController) { 235 Swiper(this.swiperController) {
@@ -241,6 +249,9 @@ export struct MultiPictureDetailPageComponent { @@ -241,6 +249,9 @@ export struct MultiPictureDetailPageComponent {
241 this.currentOffset = Math.abs(extraInfo.currentOffset) 249 this.currentOffset = Math.abs(extraInfo.currentOffset)
242 }) 250 })
243 .onTouch((event: TouchEvent) => { 251 .onTouch((event: TouchEvent) => {
  252 + if(this.duration === 0) {
  253 + this.duration = 500
  254 + }
244 if(event.type === 1) { 255 if(event.type === 1) {
245 // if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) { 256 // if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) {
246 if(this.currentOffset > 160) { 257 if(this.currentOffset > 160) {
@@ -285,113 +296,121 @@ export struct MultiPictureDetailPageComponent { @@ -285,113 +296,121 @@ export struct MultiPictureDetailPageComponent {
285 }) 296 })
286 } 297 }
287 Column(){ 298 Column(){
288 - Column(){  
289 - Row() {  
290 - Scroll(this.scroller) {  
291 - Row() {  
292 - Flex({  
293 - direction: FlexDirection.Column,  
294 - justifyContent: FlexAlign.Start  
295 - }) {  
296 - if(this.contentDetailData?.photoList?.length) {  
297 - Text() {  
298 - Span(`${this.swiperIndex + 1}`)  
299 - .fontSize(24)  
300 - .fontFamily('PingFang SC-Medium')  
301 - .fontWeight(500)  
302 - .lineHeight(28)  
303 - Span(`/${this.contentDetailData?.photoList?.length}`) 299 + if(!this.showDownload) {
  300 + Column(){
  301 + Row() {
  302 + Scroll(this.scroller) {
  303 + Row() {
  304 + Flex({
  305 + direction: FlexDirection.Column,
  306 + justifyContent: FlexAlign.Start
  307 + }) {
  308 + if(this.contentDetailData?.photoList?.length) {
  309 + Text() {
  310 + Span(`${this.swiperIndex + 1}`)
  311 + .fontSize(24)
  312 + .fontFamily('PingFang SC-Medium')
  313 + .fontWeight(500)
  314 + .lineHeight(28)
  315 + Span(`/${this.contentDetailData?.photoList?.length}`)
  316 + .fontSize(14)
  317 + .fontFamily('PingFang SC-Medium')
  318 + .fontWeight(500)
  319 + .lineHeight(19)
  320 + }
  321 + .fontColor(Color.White)
  322 + .margin(4)
  323 + }
  324 + if(this.contentDetailData.newsTitle) {
  325 + Text(`${this.contentDetailData.newsTitle}`)
  326 + .fontColor(Color.White)
  327 + .fontSize(16)
  328 + .fontFamily('PingFang SC-Semibold')
  329 + .fontWeight(600)
  330 + .lineHeight(24)
  331 + .margin({
  332 + top: 4,
  333 + left: 0,
  334 + bottom: 4,
  335 + right: 0
  336 + })
  337 + }
  338 + if(this.contentDetailData.photoList?.[this.swiperIndex].picDesc) {
  339 + Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
  340 + .fontColor(Color.White)
304 .fontSize(14) 341 .fontSize(14)
305 - .fontFamily('PingFang SC-Medium')  
306 - .fontWeight(500)  
307 - .lineHeight(19) 342 + .fontFamily('PingFang SC-Regular')
  343 + .fontWeight(400)
  344 + .lineHeight(22)
  345 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  346 + .margin({
  347 + top: 4,
  348 + left: 0,
  349 + bottom: 4,
  350 + right: 18
  351 + })
  352 + .maxLines(32)
308 } 353 }
309 - .fontColor(Color.White)  
310 - .margin(4)  
311 - }  
312 - if(this.contentDetailData.newsTitle) {  
313 - Text(`${this.contentDetailData.newsTitle}`)  
314 - .fontColor(Color.White)  
315 - .fontSize(16)  
316 - .fontFamily('PingFang SC-Semibold')  
317 - .fontWeight(600)  
318 - .lineHeight(24)  
319 - .margin({  
320 - top: 4,  
321 - left: 0,  
322 - bottom: 4,  
323 - right: 0  
324 - })  
325 - }  
326 - if(this.contentDetailData.photoList?.[this.swiperIndex].picDesc) {  
327 - Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)  
328 - .fontColor(Color.White)  
329 - .fontSize(14)  
330 - .fontFamily('PingFang SC-Regular')  
331 - .fontWeight(400)  
332 - .lineHeight(22)  
333 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
334 - .margin({  
335 - top: 4,  
336 - left: 0,  
337 - bottom: 4,  
338 - right: 18  
339 - })  
340 - .maxLines(32)  
341 } 354 }
342 } 355 }
  356 + .width('100%')
343 } 357 }
344 - .width('100%') 358 + .scrollable(ScrollDirection.Vertical)
  359 + .scrollBarWidth(0)
  360 + .height(px2vp(this.titleHeight))
  361 + .align(Alignment.Bottom)
345 } 362 }
346 - .scrollable(ScrollDirection.Vertical)  
347 - .scrollBarWidth(0)  
348 - .height(px2vp(this.titleHeight))  
349 - .align(Alignment.Bottom) 363 + OperRowListView({
  364 + contentDetailData: this.contentDetailData,
  365 + publishCommentModel: this.publishCommentModel,
  366 + operationButtonList: this.operationButtonList,
  367 + })
350 } 368 }
351 - OperRowListView({  
352 - contentDetailData: this.contentDetailData,  
353 - publishCommentModel: this.publishCommentModel,  
354 - operationButtonList: this.operationButtonList,  
355 - }) 369 + .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
  370 + TransitionEffect.translate({ x: 0, y: `-${this.bottomSafeHeight}px` })
  371 + ))
356 } 372 }
357 - .visibility(!this.showDownload ? Visibility.Visible : Visibility.None)  
358 - Column(){  
359 - Row() {  
360 - Flex({  
361 - direction: FlexDirection.Row,  
362 - justifyContent: FlexAlign.SpaceBetween  
363 - }) {  
364 - if(this.contentDetailData?.photoList?.length) {  
365 - Text() {  
366 - Span(`${this.swiperIndex + 1}`)  
367 - .fontSize(24)  
368 - .fontFamily('PingFang SC-Medium')  
369 - .fontWeight(500)  
370 - .lineHeight(28)  
371 - Span(`/${this.contentDetailData?.photoList?.length}`)  
372 - .fontSize(14)  
373 - .fontFamily('PingFang SC-Medium')  
374 - .fontWeight(500)  
375 - .lineHeight(19) 373 + if(this.showDownload) {
  374 + Column(){
  375 + Row() {
  376 + Flex({
  377 + direction: FlexDirection.Row,
  378 + justifyContent: FlexAlign.SpaceBetween
  379 + }) {
  380 + if(this.contentDetailData?.photoList?.length) {
  381 + Text() {
  382 + Span(`${this.swiperIndex + 1}`)
  383 + .fontSize(24)
  384 + .fontFamily('PingFang SC-Medium')
  385 + .fontWeight(500)
  386 + .lineHeight(28)
  387 + Span(`/${this.contentDetailData?.photoList?.length}`)
  388 + .fontSize(14)
  389 + .fontFamily('PingFang SC-Medium')
  390 + .fontWeight(500)
  391 + .lineHeight(19)
  392 + }
  393 + .fontColor(Color.White)
  394 + .margin(4)
376 } 395 }
377 - .fontColor(Color.White)  
378 - .margin(4)  
379 - }  
380 396
381 - if(this.contentDetailData.photoList?.[this.swiperIndex].picPath) {  
382 - ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })  
383 - .margin({  
384 - top: 8,  
385 - left: 18,  
386 - bottom: 24,  
387 - right: 18  
388 - }) 397 + if(this.contentDetailData.photoList?.[this.swiperIndex].picPath) {
  398 + ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
  399 + .margin({
  400 + top: 8,
  401 + left: 18,
  402 + bottom: 24,
  403 + right: 18
  404 + })
  405 + }
389 } 406 }
390 } 407 }
  408 + .width('100%')
391 } 409 }
392 - .width('100%') 410 + .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
  411 + TransitionEffect.translate({ x: 0, y: `${this.bottomSafeHeight}px` })
  412 + ))
393 } 413 }
394 - .visibility(this.showDownload ? Visibility.Visible : Visibility.None)  
395 } 414 }
396 .zIndex(10) 415 .zIndex(10)
397 .id('e_swiper_bottom') 416 .id('e_swiper_bottom')