developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yangchenggong1_wd
0440e8ac 1 parent a1495c6f

desc:实现 我的主页 吸顶效果

Inline Side-by-side
Showing 4 changed files with 204 additions and 29 deletions
@@ -4,9 +4,8 @@ import { HomePageBottomComponent } from '../components/mine/home/HomePageBottomC @@ -4,9 +4,8 @@ import { HomePageBottomComponent } from '../components/mine/home/HomePageBottomC
4 @Entry 4 @Entry
5 @Component 5 @Component
6 struct MineHomePage { 6 struct MineHomePage {
7 -  
8 @State tileOpacity: number = 0; 7 @State tileOpacity: number = 0;
9 - @State isScroll: boolean = false 8 + firstPositionY:number = 0;
10 @State isHasIntroduction: boolean = true 9 @State isHasIntroduction: boolean = true
11 @State desc:string = "点击添加简介，让大家认识你" //text 搞两个样式，如果三行，就显示 另外一个text 没有显示高度的 10 @State desc:string = "点击添加简介，让大家认识你" //text 搞两个样式，如果三行，就显示 另外一个text 没有显示高度的
12 fontColor: string = '#999999' 11 fontColor: string = '#999999'
@@ -16,33 +15,29 @@ struct MineHomePage { @@ -16,33 +15,29 @@ struct MineHomePage {
16 isChangeToUserEdit = false; 15 isChangeToUserEdit = false;
17 16
18 17
19 - aboutToAppear() {  
20 - }  
21 -  
22 build() { 18 build() {
23 - Column() {  
24 - Stack() { 19 + Stack({ alignContent: Alignment.Top }){
25 Image($r('app.media.title_bg')) 20 Image($r('app.media.title_bg'))
26 .width('100%') 21 .width('100%')
27 - .height('84lpx') 22 + .height('355lpx')
28 .objectFit(ImageFit.Cover) 23 .objectFit(ImageFit.Cover)
29 - this.MineHomeTitle(1)  
30 - this.MineHomeTitle(2) 24 +
  25 + Column(){
  26 + Stack({ alignContent: Alignment.Top }){
  27 + this.MineHomeTitleTransparent()
  28 + this.MineHomeTitleWhite()
31 } 29 }
32 30
33 Scroll() { 31 Scroll() {
34 Column() { 32 Column() {
35 //用户信息区域 33 //用户信息区域
36 - Stack() {  
37 - Image($r('app.media.title_bg'))  
38 - .width('100%')  
39 - .objectFit(ImageFit.Cover)  
40 Row() { 34 Row() {
41 Image($r('app.media.default_head')) 35 Image($r('app.media.default_head'))
42 .width('115lpx') 36 .width('115lpx')
43 .height('115lpx') 37 .height('115lpx')
44 .objectFit(ImageFit.Cover) 38 .objectFit(ImageFit.Cover)
45 .borderRadius(50) 39 .borderRadius(50)
  40 +
46 Column() { 41 Column() {
47 Row() { 42 Row() {
48 Text("人民日报6G") 43 Text("人民日报6G")
@@ -102,11 +97,21 @@ struct MineHomePage { @@ -102,11 +97,21 @@ struct MineHomePage {
102 }.alignItems(HorizontalAlign.Start) 97 }.alignItems(HorizontalAlign.Start)
103 .margin({ left: '32lpx' }) 98 .margin({ left: '32lpx' })
104 } 99 }
  100 + .onAreaChange((oldValue: Area, newValue: Area) => {
  101 + if (this.firstPositionY === 0) {
  102 + this.firstPositionY = newValue.globalPosition.y as number
  103 + }else{
  104 + let persent = (this.firstPositionY - Number(newValue.globalPosition.y)) / (this.firstPositionY * 0.3)
  105 + if(persent > 1){
  106 + persent = 1
  107 + }
  108 + this.tileOpacity = persent
  109 + }
  110 + })
  111 + .backgroundColor($r('app.color.color_transparent'))
105 .height('184lpx') 112 .height('184lpx')
106 .width('100%') 113 .width('100%')
107 .padding({ left: '35lpx' }) 114 .padding({ left: '35lpx' })
108 - }.height('184lpx')  
109 -  
110 //用户简介区域 115 //用户简介区域
111 Column() { 116 Column() {
112 Row() { 117 Row() {
@@ -138,6 +143,7 @@ struct MineHomePage { @@ -138,6 +143,7 @@ struct MineHomePage {
138 .alignItems(HorizontalAlign.Start) 143 .alignItems(HorizontalAlign.Start)
139 .justifyContent(FlexAlign.Center) 144 .justifyContent(FlexAlign.Center)
140 .width('100%') 145 .width('100%')
  146 + .backgroundColor($r('app.color.white'))
141 //间隔符 147 //间隔符
142 148
143 Divider().width('100%').height('12lpx').color($r('app.color.color_F5F5F5')).strokeWidth('12lpx') 149 Divider().width('100%').height('12lpx').color($r('app.color.color_F5F5F5')).strokeWidth('12lpx')
@@ -151,6 +157,7 @@ struct MineHomePage { @@ -151,6 +157,7 @@ struct MineHomePage {
151 HomePageBottomComponent({style:1}) 157 HomePageBottomComponent({style:1})
152 }.tabBar(this.TabBuilder(1,"关注")) 158 }.tabBar(this.TabBuilder(1,"关注"))
153 } 159 }
  160 + .backgroundColor($r('app.color.white'))
154 .animationDuration(0) 161 .animationDuration(0)
155 .onChange((index: number) => { 162 .onChange((index: number) => {
156 this.currentIndex = index 163 this.currentIndex = index
@@ -163,14 +170,56 @@ struct MineHomePage { @@ -163,14 +170,56 @@ struct MineHomePage {
163 .scrollBar(BarState.Off) 170 .scrollBar(BarState.Off)
164 .width('100%') 171 .width('100%')
165 .height('100%') 172 .height('100%')
166 - }.height('100%') 173 + }
  174 + }.width('100%')
  175 + .height('100%')
  176 +
  177 + }
  178 + @Builder MineHomeTitleTransparent() {
  179 + RelativeContainer() {
  180 + //标题栏目
  181 + Image($r('app.media.icon_arrow_left_white') )
  182 + .width('46lpx')
  183 + .height('46lpx')
  184 + .objectFit(ImageFit.Auto)
  185 + .id("back_icon")
  186 + .alignRules({
  187 + center: { anchor: "__container__", align: VerticalAlign.Center },
  188 + left: { anchor: "__container__", align: HorizontalAlign.Start }
  189 + })
  190 + .margin({ left: '31lpx' })
  191 + .onClick(() => {
  192 + router.back()
  193 + })
  194 +
  195 + Text("编辑资料")
  196 + .height('42lpx')
  197 + .maxLines(1)
  198 + .id("rightText")
  199 + .fontSize('35lpx')
  200 + .fontWeight('400lpx')
  201 + .fontColor($r('app.color.white') )
  202 + .lineHeight('42lpx')
  203 + .alignRules({
  204 + center: { anchor: "__container__", align: VerticalAlign.Center },
  205 + right: { anchor: "__container__", align: HorizontalAlign.End }
  206 + })
  207 + .margin({ right: '31lpx' })
  208 + .onClick(()=>{
  209 + this.editUserInfo()
  210 + })
  211 + }
  212 + .visibility(this.tileOpacity > 0 ? 1 : 0)
  213 + .height('84lpx')
167 .width('100%') 214 .width('100%')
  215 + .backgroundColor($r('app.color.color_transparent'))
168 } 216 }
169 217
170 - @Builder MineHomeTitle(style: number) { 218 +
  219 + @Builder MineHomeTitleWhite() {
171 RelativeContainer() { 220 RelativeContainer() {
172 //标题栏目 221 //标题栏目
173 - Image(style === 1 ? $r('app.media.icon_arrow_left_white') : $r('app.media.back_icon')) 222 + Image($r('app.media.back_icon'))
174 .width('46lpx') 223 .width('46lpx')
175 .height('46lpx') 224 .height('46lpx')
176 .objectFit(ImageFit.Auto) 225 .objectFit(ImageFit.Auto)
@@ -183,7 +232,6 @@ struct MineHomePage { @@ -183,7 +232,6 @@ struct MineHomePage {
183 .onClick(() => { 232 .onClick(() => {
184 router.back() 233 router.back()
185 }) 234 })
186 - if (style === 2)  
187 Image($r('app.media.default_head')) 235 Image($r('app.media.default_head'))
188 .width('60lpx') 236 .width('60lpx')
189 .height('60lpx') 237 .height('60lpx')
@@ -198,7 +246,6 @@ struct MineHomePage { @@ -198,7 +246,6 @@ struct MineHomePage {
198 router.back() 246 router.back()
199 }) 247 })
200 248
201 - if (style === 2)  
202 Text("我的昵称") 249 Text("我的昵称")
203 .height('42lpx') 250 .height('42lpx')
204 .maxLines(1) 251 .maxLines(1)
@@ -219,22 +266,24 @@ struct MineHomePage { @@ -219,22 +266,24 @@ struct MineHomePage {
219 .id("rightText") 266 .id("rightText")
220 .fontSize('35lpx') 267 .fontSize('35lpx')
221 .fontWeight('400lpx') 268 .fontWeight('400lpx')
222 - .fontColor(style === 1 ? $r('app.color.white') : $r('app.color.color_222222')) 269 + .fontColor($r('app.color.color_222222'))
223 .lineHeight('42lpx') 270 .lineHeight('42lpx')
224 .alignRules({ 271 .alignRules({
225 center: { anchor: "__container__", align: VerticalAlign.Center }, 272 center: { anchor: "__container__", align: VerticalAlign.Center },
226 right: { anchor: "__container__", align: HorizontalAlign.End } 273 right: { anchor: "__container__", align: HorizontalAlign.End }
227 }) 274 })
228 .margin({ right: '31lpx' }) 275 .margin({ right: '31lpx' })
229 - }  
230 - .height('84lpx')  
231 - .width('100%')  
232 - .backgroundColor(style === 1 ? "" : $r('app.color.white'))  
233 - .opacity(style === 1 ? 1 : this.isScroll ? this.tileOpacity : 0)  
234 .onClick(()=>{ 276 .onClick(()=>{
235 this.editUserInfo() 277 this.editUserInfo()
236 }) 278 })
237 } 279 }
  280 + .visibility(this.tileOpacity > 0 ? 0 : 1)
  281 + .height('84lpx')
  282 + .width('100%')
  283 + .backgroundColor($r('app.color.white'))
  284 + .opacity(this.tileOpacity )
  285 +
  286 + }
238 287
239 @Builder TabBuilder(index: number, title: string) { 288 @Builder TabBuilder(index: number, title: string) {
240 Stack(){ 289 Stack(){
@@ -267,7 +316,6 @@ struct MineHomePage { @@ -267,7 +316,6 @@ struct MineHomePage {
267 * 跳转编辑资料(防止二次点击) 316 * 跳转编辑资料(防止二次点击)
268 */ 317 */
269 editUserInfo(){ 318 editUserInfo(){
270 - console.log("ycg","a"+this.isChangeToUserEdit)  
271 if(!this.isChangeToUserEdit){ 319 if(!this.isChangeToUserEdit){
272 this.isChangeToUserEdit = true; 320 this.isChangeToUserEdit = true;
273 let c = setInterval(() => { 321 let c = setInterval(() => {
@@ -275,7 +323,6 @@ struct MineHomePage { @@ -275,7 +323,6 @@ struct MineHomePage {
275 }, 1000); 323 }, 1000);
276 324
277 //route 跳转写这里 TODO 325 //route 跳转写这里 TODO
278 -  
279 } 326 }
280 } 327 }
281 328
@@ -106,6 +106,11 @@ @@ -106,6 +106,11 @@
106 { 106 {
107 "name": "color_B2FFFFFF", 107 "name": "color_B2FFFFFF",
108 "value": "#B2FFFFFF" 108 "value": "#B2FFFFFF"
  109 + },
  110 + {
  111 + "name": "color_transparent",
  112 + "value": "#00000000"
109 } 113 }
  114 +
110 ] 115 ]
111 } 116 }
@@ -166,6 +166,129 @@ @@ -166,6 +166,129 @@
166 "targetType": 8, 166 "targetType": 8,
167 "topicType": null, 167 "topicType": null,
168 "uuid": "f809d73f-a66c-4dd6-a4cf-99e3a9c9621e" 168 "uuid": "f809d73f-a66c-4dd6-a4cf-99e3a9c9621e"
  169 + },
  170 + {
  171 + "avatarFrame": "",
  172 + "checkStatus": 0,
  173 + "commentContent": "你好",
  174 + "commentContentSensitive": "",
  175 + "commentLevel": 1,
  176 + "commentPics": "",
  177 + "commentSensitive": "",
  178 + "commentType": "2",
  179 + "createTime": "2024-03-14 17:55:55",
  180 + "fromCreatorId": "",
  181 + "fromDeviceId": "",
  182 + "fromUserHeader": "https://sitcontentjdcdn.aikan.pdnews.cn//img/user/2024031215/48d5bd53227d436b9faa937b3ac14600.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg",
  183 + "fromUserId": "567387477063621",
  184 + "fromUserName": "人民日报网友aPrtq5",
  185 + "fromUserType": 1,
  186 + "h5Url": "",
  187 + "id": 403447,
  188 + "keyArticle": 0,
  189 + "likeNum": 0,
  190 + "parentCommentVo": null,
  191 + "parentId": -1,
  192 + "rootCommentId": 403447,
  193 + "sensitiveExist": 0,
  194 + "sensitiveShow": 1,
  195 + "shareInfo": {
  196 + "shareCoverUrl": "http://sitcontentjdcdn.aikan.pdnews.cn/zhbj-20231103/image/content/046db0ef912f43dda639009e2b78a774.png",
  197 + "shareSummary": "复测-坐船观鸟，骑行散步，通州125处湿地邀您亲近自然-导读",
  198 + "shareTitle": "复测-坐船观鸟，骑行散步，通州125处湿",
  199 + "shareUrl": "https://pd-people-sit.pdnews.cn/column/30000637972-500000010900"
  200 + },
  201 + "targetId": "30000637972",
  202 + "targetRelId": "500000010900",
  203 + "targetRelObjectId": "2002",
  204 + "targetRelType": 1,
  205 + "targetStatus": 0,
  206 + "targetTitle": "复测-坐船观鸟，骑行散步，通州125处湿地邀您亲近自然",
  207 + "targetType": 8,
  208 + "topicType": null,
  209 + "uuid": "f809d73f-a66c-4dd6-a4cf-99e3a9c9621e"
  210 + },
  211 + {
  212 + "avatarFrame": "",
  213 + "checkStatus": 0,
  214 + "commentContent": "你好",
  215 + "commentContentSensitive": "",
  216 + "commentLevel": 1,
  217 + "commentPics": "",
  218 + "commentSensitive": "",
  219 + "commentType": "2",
  220 + "createTime": "2024-03-14 17:55:55",
  221 + "fromCreatorId": "",
  222 + "fromDeviceId": "",
  223 + "fromUserHeader": "https://sitcontentjdcdn.aikan.pdnews.cn//img/user/2024031215/48d5bd53227d436b9faa937b3ac14600.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg",
  224 + "fromUserId": "567387477063621",
  225 + "fromUserName": "人民日报网友aPrtq5",
  226 + "fromUserType": 1,
  227 + "h5Url": "",
  228 + "id": 403447,
  229 + "keyArticle": 0,
  230 + "likeNum": 0,
  231 + "parentCommentVo": null,
  232 + "parentId": -1,
  233 + "rootCommentId": 403447,
  234 + "sensitiveExist": 0,
  235 + "sensitiveShow": 1,
  236 + "shareInfo": {
  237 + "shareCoverUrl": "http://sitcontentjdcdn.aikan.pdnews.cn/zhbj-20231103/image/content/046db0ef912f43dda639009e2b78a774.png",
  238 + "shareSummary": "复测-坐船观鸟，骑行散步，通州125处湿地邀您亲近自然-导读",
  239 + "shareTitle": "复测-坐船观鸟，骑行散步，通州125处湿",
  240 + "shareUrl": "https://pd-people-sit.pdnews.cn/column/30000637972-500000010900"
  241 + },
  242 + "targetId": "30000637972",
  243 + "targetRelId": "500000010900",
  244 + "targetRelObjectId": "2002",
  245 + "targetRelType": 1,
  246 + "targetStatus": 0,
  247 + "targetTitle": "复测-坐船观鸟，骑行散步，通州125处湿地邀您亲近自然",
  248 + "targetType": 8,
  249 + "topicType": null,
  250 + "uuid": "f809d73f-a66c-4dd6-a4cf-99e3a9c9621e"
  251 + },
  252 + {
  253 + "avatarFrame": "",
  254 + "checkStatus": 0,
  255 + "commentContent": "你好",
  256 + "commentContentSensitive": "",
  257 + "commentLevel": 1,
  258 + "commentPics": "",
  259 + "commentSensitive": "",
  260 + "commentType": "2",
  261 + "createTime": "2024-03-14 17:55:55",
  262 + "fromCreatorId": "",
  263 + "fromDeviceId": "",
  264 + "fromUserHeader": "https://sitcontentjdcdn.aikan.pdnews.cn//img/user/2024031215/48d5bd53227d436b9faa937b3ac14600.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg",
  265 + "fromUserId": "567387477063621",
  266 + "fromUserName": "人民日报网友aPrtq5",
  267 + "fromUserType": 1,
  268 + "h5Url": "",
  269 + "id": 403447,
  270 + "keyArticle": 0,
  271 + "likeNum": 0,
  272 + "parentCommentVo": null,
  273 + "parentId": -1,
  274 + "rootCommentId": 403447,
  275 + "sensitiveExist": 0,
  276 + "sensitiveShow": 1,
  277 + "shareInfo": {
  278 + "shareCoverUrl": "http://sitcontentjdcdn.aikan.pdnews.cn/zhbj-20231103/image/content/046db0ef912f43dda639009e2b78a774.png",
  279 + "shareSummary": "复测-坐船观鸟，骑行散步，通州125处湿地邀您亲近自然-导读",
  280 + "shareTitle": "复测-坐船观鸟，骑行散步，通州125处湿",
  281 + "shareUrl": "https://pd-people-sit.pdnews.cn/column/30000637972-500000010900"
  282 + },
  283 + "targetId": "30000637972",
  284 + "targetRelId": "500000010900",
  285 + "targetRelObjectId": "2002",
  286 + "targetRelType": 1,
  287 + "targetStatus": 0,
  288 + "targetTitle": "复测-坐船观鸟，骑行散步，通州125处湿地邀您亲近自然",
  289 + "targetType": 8,
  290 + "topicType": null,
  291 + "uuid": "f809d73f-a66c-4dd6-a4cf-99e3a9c9621e"
169 } 292 }
170 ], 293 ],
171 "pageNum": 1, 294 "pageNum": 1,