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 212 additions and 159 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(){
90 - // 头部返回  
91 - PeopleShipHomePageNavComponent({  
92 - attentionOpacity: this.attentionOpacity,  
93 - topOpacity: this.topOpacity,  
94 - detailModel: this.detailModel  
95 - })  
96 - .height($r('app.float.top_bar_height'))  
97 - .backgroundColor(Color.Transparent) 89 + Stack({ alignContent: Alignment.Top }){
  90 + this.peopleHomeTitleTransparent()
  91 + // 头部返回
  92 + PeopleShipHomePageNavComponent({
  93 + attentionOpacity: this.attentionOpacity,
  94 + topOpacity: this.topOpacity,
  95 + detailModel: this.detailModel
  96 + })
  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({  
113 - publishCount: this.publishCount,  
114 - creatorId: this.creatorId  
115 - })  
116 - }.height('100%')  
117 -  
118 - 111 + PeopleShipHomeListComponent({
  112 + publishCount: this.publishCount,
  113 + creatorId: this.creatorId
  114 + })
  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,129 +15,162 @@ export struct PeopleShipHomePageNavComponent { @@ -15,129 +15,162 @@ 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() { 18 + RelativeContainer() {
  19 + Row() {
  20 + // 返回
  21 + Image((this.topOpacity > 0.5 ? $r('app.media.icon_arrow_left') : $r('app.media.icon_arrow_left_white')))
  22 + .width('24vp')
  23 + .height('24vp')
  24 + .objectFit(ImageFit.Auto)
  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 })
  31 + .onClick(() => {
  32 + router.back()
  33 + })
  34 + // 头像
  35 + PeopleShipHomePageHeadComponent({
  36 + diameter: 30,
  37 + iconDiameter: 10,
  38 + headPhotoUrl: (this.detailModel.headPhotoUrl && this.detailModel.headPhotoUrl.length > 0 ) ? this.detailModel.headPhotoUrl : $r('app.media.WDAccountOwnerHedaerDefaultIcon'),
  39 + authIcon: this.detailModel.authIcon
  40 + }).onClick(()=>{
  41 + let params = {
  42 + 'headPhotoUrl': this.detailModel.headPhotoUrl,
  43 + } as Record<string, string>;
  44 + WDRouterRule.jumpWithPage(WDRouterPage.showHomePageHeaderPage,params)
  45 + }).margin({
  46 + left: '10vp',
  47 + })
  48 + .id("Page_Head")
  49 + .alignRules({
  50 + center: { anchor: "__container__", align: VerticalAlign.Center },
  51 + left: { anchor: "back_icon", align: HorizontalAlign.End }
  52 + })
  53 + .visibility((this.topOpacity > 0.5 ? Visibility.Visible : Visibility.Hidden))
26 54
27 - Row() {  
28 - // 返回  
29 - Image((this.topOpacity > 0.5 ? $r('app.media.icon_arrow_left') : $r('app.media.icon_arrow_left_white')))  
30 - .width('24vp')  
31 - .height('24vp')  
32 - .objectFit(ImageFit.Auto)  
33 - .margin({ left: '10vp' })  
34 - .onClick(() => {  
35 - router.back()  
36 - })  
37 - // 头像  
38 - PeopleShipHomePageHeadComponent({  
39 - diameter: 30,  
40 - iconDiameter: 10,  
41 - headPhotoUrl: (this.detailModel.headPhotoUrl && this.detailModel.headPhotoUrl.length > 0 ) ? this.detailModel.headPhotoUrl : $r('app.media.WDAccountOwnerHedaerDefaultIcon'),  
42 - authIcon: this.detailModel.authIcon  
43 - }).onClick(()=>{  
44 - let params = {  
45 - 'headPhotoUrl': this.detailModel.headPhotoUrl,  
46 - } as Record<string, string>;  
47 - WDRouterRule.jumpWithPage(WDRouterPage.showHomePageHeaderPage,params)  
48 - }).margin({  
49 - left: '10vp',  
50 - })  
51 - .visibility((this.topOpacity > 0.5 ? Visibility.Visible : Visibility.Hidden)) 55 + // 文字
  56 + Text(this.detailModel.userName)
  57 + .height('46vp')
  58 + .fontSize($r('app.float.vp_14'))
  59 + .fontColor($r('app.color.color_222222'))
  60 + .margin({
  61 + left: '6vp'
  62 + })
  63 + .id("user_Head")
  64 + .alignRules({
  65 + center: { anchor: "__container__", align: VerticalAlign.Center },
  66 + left: { anchor: "Page_Head", align: HorizontalAlign.End }
  67 + })
  68 + .visibility((this.topOpacity > 0.5 ? Visibility.Visible : Visibility.Hidden))
52 69
53 - // 文字  
54 - Text(this.detailModel.userName)  
55 - .height('46vp')  
56 - .fontSize($r('app.float.vp_14'))  
57 - .fontColor($r('app.color.color_222222'))  
58 - .margin({  
59 - left: '6vp'  
60 - })  
61 - .visibility((this.topOpacity > 0.5 ? Visibility.Visible : Visibility.Hidden))  
62 -  
63 - if (this.isAttention == '0') {  
64 - // 关注  
65 - Button({ type: ButtonType.Normal, stateEffect: true }) {  
66 - Row(){  
67 - Image($r('app.media.people_ship_top_add'))  
68 - .objectFit(ImageFit.Auto)  
69 - .width('13vp')  
70 - .height('13pv')  
71 - .margin({  
72 - right: '3vp'  
73 - })  
74 - Text('关注')  
75 - .fontSize($r('app.float.vp_12'))  
76 - .fontColor(Color.White)  
77 - .height('100%')  
78 - }  
79 - .alignSelf(ItemAlign.Center)  
80 - .justifyContent(FlexAlign.Center)  
81 - .width('100%')  
82 - .height('100%')  
83 - }  
84 -  
85 - .borderRadius(4)  
86 - .backgroundColor($r('app.color.color_ED2800'))  
87 - .width('54vp')  
88 - .height('24vp')  
89 - .onClick(() => {  
90 - if (this.isLoadingAttention){  
91 - return  
92 - }  
93 - this.isLoadingAttention = true  
94 - }) 70 + if (this.isAttention == '0') {
  71 + // 关注
  72 + Button({ type: ButtonType.Normal, stateEffect: true }) {
  73 + Row(){
  74 + Image($r('app.media.people_ship_top_add'))
  75 + .objectFit(ImageFit.Auto)
  76 + .width('13vp')
  77 + .height('13pv')
95 .margin({ 78 .margin({
96 - left: '12vp',  
97 - })  
98 - .padding(0)  
99 - .visibility((this.attentionOpacity ? Visibility.Visible : Visibility.Hidden))  
100 - } else {  
101 - Button('已关注', { type: ButtonType.Normal, stateEffect: true })  
102 - .borderRadius(4)  
103 - .backgroundColor($r('app.color.color_F5F5F5'))  
104 - .width('54vp')  
105 - .height('24vp')  
106 - .onClick(() => {  
107 - if (this.isLoadingAttention){  
108 - return  
109 - }  
110 - this.isLoadingAttention = true 79 + right: '3vp'
111 }) 80 })
112 - .margin({  
113 - left: '12vp',  
114 - })  
115 - .padding(0) 81 + Text('关注')
116 .fontSize($r('app.float.vp_12')) 82 .fontSize($r('app.float.vp_12'))
117 - .fontColor($r('app.color.color_999999'))  
118 - .visibility((this.attentionOpacity ? Visibility.Visible : Visibility.Hidden)) 83 + .fontColor(Color.White)
  84 + .height('100%')
119 } 85 }
  86 + .alignSelf(ItemAlign.Center)
  87 + .justifyContent(FlexAlign.Center)
  88 + .width('100%')
  89 + .height('100%')
120 } 90 }
121 - .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 - // }) 91 +
  92 + .id("Button_Head")
  93 + .alignRules({
  94 + center: { anchor: "__container__", align: VerticalAlign.Center },
  95 + left: { anchor: "user_Head", align: HorizontalAlign.End }
  96 + })
  97 + .borderRadius(4)
  98 + .backgroundColor($r('app.color.color_ED2800'))
  99 + .width('54vp')
  100 + .height('24vp')
  101 + .onClick(() => {
  102 + if (this.isLoadingAttention){
  103 + return
  104 + }
  105 + this.isLoadingAttention = true
  106 + })
  107 + .margin({
  108 + left: '12vp',
  109 + })
  110 + .padding(0)
  111 + .visibility((this.attentionOpacity ? Visibility.Visible : Visibility.Hidden))
  112 + } else {
  113 + Button('已关注', { type: ButtonType.Normal, stateEffect: true })
  114 + .borderRadius(4)
  115 + .backgroundColor($r('app.color.color_F5F5F5'))
  116 + .width('54vp')
  117 + .height('24vp')
  118 + .onClick(() => {
  119 + if (this.isLoadingAttention){
  120 + return
  121 + }
  122 + this.isLoadingAttention = true
  123 + })
  124 + .margin({
  125 + left: '12vp',
  126 + })
  127 + .id("Button_Head")
  128 + .alignRules({
  129 + center: { anchor: "__container__", align: VerticalAlign.Center },
  130 + left: { anchor: "user_Head", align: HorizontalAlign.End }
  131 + })
  132 + .padding(0)
  133 + .fontSize($r('app.float.vp_12'))
  134 + .fontColor($r('app.color.color_999999'))
  135 + .visibility((this.attentionOpacity ? Visibility.Visible : Visibility.Hidden))
132 } 136 }
133 - .width('100%')  
134 - .height('100%')  
135 - .alignItems(VerticalAlign.Center)  
136 - .justifyContent(FlexAlign.SpaceBetween)  
137 } 137 }
138 - .zIndex(1000)  
139 - .width('100%')  
140 .height('100%') 138 .height('100%')
141 } 139 }
  140 + .height(44)
  141 + .width('100%')
  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