developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangliang_wd
a7dd144e 1 parent ba3d93cf

feat：优化人民号顶部背景展示，以及上滑逻辑

Inline Side-by-side
Showing 3 changed files with 117 additions and 64 deletions
@@ -47,6 +47,7 @@ struct PeopleShipHomePage { @@ -47,6 +47,7 @@ struct PeopleShipHomePage {
47 @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0 47 @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
48 @State isConnectNetwork : boolean = NetworkUtil.isNetConnected() 48 @State isConnectNetwork : boolean = NetworkUtil.isNetConnected()
49 @State isHasHomePage: boolean = true 49 @State isHasHomePage: boolean = true
  50 + firstPositionY:number = 0;
50 51
51 onPageShow(): void { 52 onPageShow(): void {
52 WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff'}) 53 WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff'})
@@ -64,19 +65,18 @@ struct PeopleShipHomePage { @@ -64,19 +65,18 @@ struct PeopleShipHomePage {
64 } 65 }
65 } 66 }
66 67
  68 +
67 build() { 69 build() {
68 if(this.isConnectNetwork){ 70 if(this.isConnectNetwork){
69 if (this.isHasHomePage){ 71 if (this.isHasHomePage){
70 - Stack({ alignContent: Alignment.TopStart }) { 72 + Stack({ alignContent: Alignment.Top }) {
71 Stack({ alignContent: Alignment.Top }){ 73 Stack({ alignContent: Alignment.Top }){
72 // 顶部图片 74 // 顶部图片
73 Image($r('app.media.home_page_bg')) 75 Image($r('app.media.home_page_bg'))
74 .width('100%') 76 .width('100%')
75 - .height('120vp')  
76 - .objectFit(ImageFit.Fill)  
77 - .objectRepeat(ImageRepeat.NoRepeat)  
78 - .backgroundColor(Color.White)  
79 - .visibility(this.isLoading ? Visibility.None : Visibility.Visible) 77 + ///1-this.topOpacity 联动上滑
  78 + .height(this.topOpacity>1?0:120*(1-this.topOpacity))
  79 + .objectFit(ImageFit.Cover)
80 80
81 Row() 81 Row()
82 .height(px2vp(this.topSafeHeight)) 82 .height(px2vp(this.topSafeHeight))
@@ -85,16 +85,16 @@ struct PeopleShipHomePage { @@ -85,16 +85,16 @@ struct PeopleShipHomePage {
85 .visibility(this.topOpacity > 0 ? Visibility.Visible : Visibility.None) 85 .visibility(this.topOpacity > 0 ? Visibility.Visible : Visibility.None)
86 .opacity(this.topOpacity ) 86 .opacity(this.topOpacity )
87 } 87 }
88 -  
89 Column(){ 88 Column(){
  89 + Stack({ alignContent: Alignment.Top }){
  90 + this.peopleHomeTitleTransparent()
90 // 头部返回 91 // 头部返回
91 PeopleShipHomePageNavComponent({ 92 PeopleShipHomePageNavComponent({
92 attentionOpacity: this.attentionOpacity, 93 attentionOpacity: this.attentionOpacity,
93 topOpacity: this.topOpacity, 94 topOpacity: this.topOpacity,
94 detailModel: this.detailModel 95 detailModel: this.detailModel
95 }) 96 })
96 - .height($r('app.float.top_bar_height'))  
97 - .backgroundColor(Color.Transparent) 97 + }
98 if (this.detailModel && this.detailModel.userName) { 98 if (this.detailModel && this.detailModel.userName) {
99 Scroll(this.scroller) { 99 Scroll(this.scroller) {
100 Column() { 100 Column() {
@@ -106,36 +106,34 @@ struct PeopleShipHomePage { @@ -106,36 +106,34 @@ struct PeopleShipHomePage {
106 topHeight: this.topHeight 106 topHeight: this.topHeight
107 }) 107 })
108 .width("100%") 108 .width("100%")
109 - // .height(this.topHeight) 109 + .height(this.topHeight)
110 // 列表 110 // 列表
111 - Column(){  
112 PeopleShipHomeListComponent({ 111 PeopleShipHomeListComponent({
113 publishCount: this.publishCount, 112 publishCount: this.publishCount,
114 creatorId: this.creatorId 113 creatorId: this.creatorId
115 }) 114 })
116 - }.height('100%')  
117 -  
118 - 115 + // Column(){
  116 + //
  117 + //
  118 + // }.height('100%')
119 } 119 }
120 .width("100%") 120 .width("100%")
121 .justifyContent(FlexAlign.Start) 121 .justifyContent(FlexAlign.Start)
122 .alignItems(HorizontalAlign.Start) 122 .alignItems(HorizontalAlign.Start)
123 - // .height('100%')  
124 - // .height(this.publishCount == 0 ? '100%' : '')  
125 } 123 }
126 - .scrollable(ScrollDirection.Vertical)  
127 - // .alignSelf(ItemAlign.Start)  
128 - // .align(Alignment.Start)  
129 .edgeEffect(EdgeEffect.None) 124 .edgeEffect(EdgeEffect.None)
130 - .friction(0.7)  
131 - .backgroundColor(Color.White)  
132 .scrollBar(BarState.Off) 125 .scrollBar(BarState.Off)
133 .width('100%') 126 .width('100%')
134 - .height('calc(100% - 44vp)')  
135 - // .layoutWeight(1) 127 + .layoutWeight(1)
  128 + // .scrollable(ScrollDirection.Vertical)
  129 + // .edgeEffect(EdgeEffect.None)
  130 + // .friction(0.7)
  131 + // .backgroundColor(Color.White)
  132 + // .scrollBar(BarState.Off)
  133 + // .width('100%')
  134 + // .height('calc(100% - 44vp)')
136 .onDidScroll(() => { 135 .onDidScroll(() => {
137 - // this.topOpacity = yOffset / (this.getDeviceHeight() * 0.2)  
138 - this.topOpacity = this.scroller.currentOffset().yOffset / 100 136 + this.topOpacity = this.scroller.currentOffset().yOffset / 120
139 if (this.scroller.currentOffset().yOffset >= this.topHeight - 66) { 137 if (this.scroller.currentOffset().yOffset >= this.topHeight - 66) {
140 this.attentionOpacity = true 138 this.attentionOpacity = true
141 } else { 139 } else {
@@ -146,9 +144,6 @@ struct PeopleShipHomePage { @@ -146,9 +144,6 @@ struct PeopleShipHomePage {
146 }) 144 })
147 } 145 }
148 } 146 }
149 - .alignItems(HorizontalAlign.Start)  
150 - .justifyContent(FlexAlign.Start)  
151 - .width('100%')  
152 .margin({top:px2vp(this.topSafeHeight)}) 147 .margin({top:px2vp(this.topSafeHeight)})
153 } 148 }
154 .width('100%') 149 .width('100%')
@@ -177,6 +172,29 @@ struct PeopleShipHomePage { @@ -177,6 +172,29 @@ struct PeopleShipHomePage {
177 } 172 }
178 } 173 }
179 174
  175 + @Builder peopleHomeTitleTransparent() {
  176 + RelativeContainer() {
  177 + //标题栏目
  178 + Image($r('app.media.icon_arrow_left_white') )
  179 + .width(24)
  180 + .height(24)
  181 + .objectFit(ImageFit.Auto)
  182 + .id("back_icon")
  183 + .alignRules({
  184 + center: { anchor: "__container__", align: VerticalAlign.Center },
  185 + left: { anchor: "__container__", align: HorizontalAlign.Start }
  186 + })
  187 + .margin({ left: 18 })
  188 + .onClick(() => {
  189 + router.back()
  190 + })
  191 + }
  192 + .visibility(this.topOpacity > 0 ? 1 : 0)
  193 + .height(44)
  194 + .width('100%')
  195 + .backgroundColor($r('app.color.color_transparent'))
  196 + }
  197 +
180 aboutToAppear() { 198 aboutToAppear() {
181 this.getData() 199 this.getData()
182 } 200 }
@@ -256,3 +274,5 @@ struct PeopleShipHomePage { @@ -256,3 +274,5 @@ struct PeopleShipHomePage {
256 } 274 }
257 } 275 }
258 276
  277 +
  278 +
@@ -15,22 +15,19 @@ export struct PeopleShipHomePageNavComponent { @@ -15,22 +15,19 @@ export struct PeopleShipHomePageNavComponent {
15 @Prop detailModel: PeopleShipUserDetailData = {} as PeopleShipUserDetailData 15 @Prop detailModel: PeopleShipUserDetailData = {} as PeopleShipUserDetailData
16 16
17 build() { 17 build() {
18 - Row() {  
19 - Stack({ alignContent: Alignment.TopStart }) {  
20 - Row()  
21 - .width('100%')  
22 - .height('100%')  
23 - .backgroundColor($r('app.color.white'))  
24 - .opacity(this.topOpacity)  
25 - Row() {  
26 - 18 + RelativeContainer() {
27 Row() { 19 Row() {
28 // 返回 20 // 返回
29 Image((this.topOpacity > 0.5 ? $r('app.media.icon_arrow_left') : $r('app.media.icon_arrow_left_white'))) 21 Image((this.topOpacity > 0.5 ? $r('app.media.icon_arrow_left') : $r('app.media.icon_arrow_left_white')))
30 .width('24vp') 22 .width('24vp')
31 .height('24vp') 23 .height('24vp')
32 .objectFit(ImageFit.Auto) 24 .objectFit(ImageFit.Auto)
33 - .margin({ left: '10vp' }) 25 + .id("back_icon")
  26 + .alignRules({
  27 + center: { anchor: "__container__", align: VerticalAlign.Center },
  28 + left: { anchor: "__container__", align: HorizontalAlign.Start }
  29 + })
  30 + .margin({ left: 18 })
34 .onClick(() => { 31 .onClick(() => {
35 router.back() 32 router.back()
36 }) 33 })
@@ -48,6 +45,11 @@ export struct PeopleShipHomePageNavComponent { @@ -48,6 +45,11 @@ export struct PeopleShipHomePageNavComponent {
48 }).margin({ 45 }).margin({
49 left: '10vp', 46 left: '10vp',
50 }) 47 })
  48 + .id("Page_Head")
  49 + .alignRules({
  50 + center: { anchor: "__container__", align: VerticalAlign.Center },
  51 + left: { anchor: "back_icon", align: HorizontalAlign.End }
  52 + })
51 .visibility((this.topOpacity > 0.5 ? Visibility.Visible : Visibility.Hidden)) 53 .visibility((this.topOpacity > 0.5 ? Visibility.Visible : Visibility.Hidden))
52 54
53 // 文字 55 // 文字
@@ -58,6 +60,11 @@ export struct PeopleShipHomePageNavComponent { @@ -58,6 +60,11 @@ export struct PeopleShipHomePageNavComponent {
58 .margin({ 60 .margin({
59 left: '6vp' 61 left: '6vp'
60 }) 62 })
  63 + .id("user_Head")
  64 + .alignRules({
  65 + center: { anchor: "__container__", align: VerticalAlign.Center },
  66 + left: { anchor: "Page_Head", align: HorizontalAlign.End }
  67 + })
61 .visibility((this.topOpacity > 0.5 ? Visibility.Visible : Visibility.Hidden)) 68 .visibility((this.topOpacity > 0.5 ? Visibility.Visible : Visibility.Hidden))
62 69
63 if (this.isAttention == '0') { 70 if (this.isAttention == '0') {
@@ -82,6 +89,11 @@ export struct PeopleShipHomePageNavComponent { @@ -82,6 +89,11 @@ export struct PeopleShipHomePageNavComponent {
82 .height('100%') 89 .height('100%')
83 } 90 }
84 91
  92 + .id("Button_Head")
  93 + .alignRules({
  94 + center: { anchor: "__container__", align: VerticalAlign.Center },
  95 + left: { anchor: "user_Head", align: HorizontalAlign.End }
  96 + })
85 .borderRadius(4) 97 .borderRadius(4)
86 .backgroundColor($r('app.color.color_ED2800')) 98 .backgroundColor($r('app.color.color_ED2800'))
87 .width('54vp') 99 .width('54vp')
@@ -112,6 +124,11 @@ export struct PeopleShipHomePageNavComponent { @@ -112,6 +124,11 @@ export struct PeopleShipHomePageNavComponent {
112 .margin({ 124 .margin({
113 left: '12vp', 125 left: '12vp',
114 }) 126 })
  127 + .id("Button_Head")
  128 + .alignRules({
  129 + center: { anchor: "__container__", align: VerticalAlign.Center },
  130 + left: { anchor: "user_Head", align: HorizontalAlign.End }
  131 + })
115 .padding(0) 132 .padding(0)
116 .fontSize($r('app.float.vp_12')) 133 .fontSize($r('app.float.vp_12'))
117 .fontColor($r('app.color.color_999999')) 134 .fontColor($r('app.color.color_999999'))
@@ -119,25 +136,41 @@ export struct PeopleShipHomePageNavComponent { @@ -119,25 +136,41 @@ export struct PeopleShipHomePageNavComponent {
119 } 136 }
120 } 137 }
121 .height('100%') 138 .height('100%')
122 - Blank()  
123 - // 分享 分享暂不展示  
124 - // Image((this.topOpacity > 0.5 ? $r('app.media.icon_forward') : $r('app.media.icon_share')))  
125 - // .width('24vp')  
126 - // .height('24vp')  
127 - // .objectFit(ImageFit.Auto)  
128 - // .margin({ right: '10vp' })  
129 - // .onClick(() => {  
130 - // ToastUtils.showToast('分享为公共方法，待开发', 1000);  
131 - // })  
132 - }  
133 - .width('100%')  
134 - .height('100%')  
135 - .alignItems(VerticalAlign.Center)  
136 - .justifyContent(FlexAlign.SpaceBetween)  
137 } 139 }
138 - .zIndex(1000) 140 + .height(44)
139 .width('100%') 141 .width('100%')
140 - .height('100%')  
141 - } 142 + .backgroundColor($r('app.color.white'))
  143 + .visibility(this.topOpacity > 0 ? 0 : 1)
  144 + .opacity(this.topOpacity )
  145 +
  146 + // Row() {
  147 + // Stack({ alignContent: Alignment.TopStart }) {
  148 + // Row()
  149 + // .width('100%')
  150 + // .height('100%')
  151 + // .backgroundColor($r('app.color.white'))
  152 + // .opacity(this.topOpacity)
  153 + // Row() {
  154 + //
  155 + // Blank()
  156 + // // 分享 分享暂不展示
  157 + // // Image((this.topOpacity > 0.5 ? $r('app.media.icon_forward') : $r('app.media.icon_share')))
  158 + // // .width('24vp')
  159 + // // .height('24vp')
  160 + // // .objectFit(ImageFit.Auto)
  161 + // // .margin({ right: '10vp' })
  162 + // // .onClick(() => {
  163 + // // ToastUtils.showToast('分享为公共方法，待开发', 1000);
  164 + // // })
  165 + // }
  166 + // .width('100%')
  167 + // .height('100%')
  168 + // .alignItems(VerticalAlign.Center)
  169 + // .justifyContent(FlexAlign.SpaceBetween)
  170 + // }
  171 + // .zIndex(1000)
  172 + // .width('100%')
  173 + // .height('100%')
  174 + // }
142 } 175 }
143 } 176 }
@@ -37,13 +37,13 @@ export struct PeopleShipHomePageTopComponent { @@ -37,13 +37,13 @@ export struct PeopleShipHomePageTopComponent {
37 Column() { 37 Column() {
38 Stack({ alignContent: Alignment.TopStart }) { 38 Stack({ alignContent: Alignment.TopStart }) {
39 // 顶部图片 39 // 顶部图片
40 - Image($r('app.media.home_page_bg'))  
41 - .width('100%')  
42 - .height('48vp')  
43 - .objectFit(ImageFit.Auto)  
44 - .objectRepeat(ImageRepeat.NoRepeat)  
45 - .objectFit(ImageFit.Auto)  
46 - .backgroundColor(Color.White) 40 + // Image($r('app.media.home_page_bg'))
  41 + // .width('100%')
  42 + // .height(120)
  43 + // .objectFit(ImageFit.Auto)
  44 + // .objectRepeat(ImageRepeat.NoRepeat)
  45 + // .objectFit(ImageFit.Auto)
  46 + // .backgroundColor(Color.White)
47 // 头像和名称 47 // 头像和名称
48 Row() { 48 Row() {
49 // 头像 49 // 头像
@@ -264,7 +264,7 @@ export struct PeopleShipHomePageTopComponent { @@ -264,7 +264,7 @@ export struct PeopleShipHomePageTopComponent {
264 .height('6vp') 264 .height('6vp')
265 } 265 }
266 .width('100%') 266 .width('100%')
267 - .backgroundColor(Color.White) 267 + .backgroundColor($r('app.color.color_transparent'))
268 268
269 } 269 }
270 270