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 {
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
@State isConnectNetwork : boolean = NetworkUtil.isNetConnected()
@State isHasHomePage: boolean = true
firstPositionY:number = 0;
onPageShow(): void {
WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff'})
... ... @@ -64,19 +65,18 @@ struct PeopleShipHomePage {
}
}
build() {
if(this.isConnectNetwork){
if (this.isHasHomePage){
Stack({ alignContent: Alignment.TopStart }) {
Stack({ alignContent: Alignment.Top }) {
Stack({ alignContent: Alignment.Top }){
// 顶部图片
Image($r('app.media.home_page_bg'))
.width('100%')
.height('120vp')
.objectFit(ImageFit.Fill)
.objectRepeat(ImageRepeat.NoRepeat)
.backgroundColor(Color.White)
.visibility(this.isLoading ? Visibility.None : Visibility.Visible)
///1-this.topOpacity 联动上滑
.height(this.topOpacity>1?0:120*(1-this.topOpacity))
.objectFit(ImageFit.Cover)
Row()
.height(px2vp(this.topSafeHeight))
... ... @@ -85,16 +85,16 @@ struct PeopleShipHomePage {
.visibility(this.topOpacity > 0 ? Visibility.Visible : Visibility.None)
.opacity(this.topOpacity )
}
Column(){
// 头部返回
PeopleShipHomePageNavComponent({
attentionOpacity: this.attentionOpacity,
topOpacity: this.topOpacity,
detailModel: this.detailModel
})
.height($r('app.float.top_bar_height'))
.backgroundColor(Color.Transparent)
Stack({ alignContent: Alignment.Top }){
this.peopleHomeTitleTransparent()
// 头部返回
PeopleShipHomePageNavComponent({
attentionOpacity: this.attentionOpacity,
topOpacity: this.topOpacity,
detailModel: this.detailModel
})
}
if (this.detailModel && this.detailModel.userName) {
Scroll(this.scroller) {
Column() {
... ... @@ -106,36 +106,34 @@ struct PeopleShipHomePage {
topHeight: this.topHeight
})
.width("100%")
// .height(this.topHeight)
.height(this.topHeight)
// 列表
Column(){
PeopleShipHomeListComponent({
publishCount: this.publishCount,
creatorId: this.creatorId
})
}.height('100%')
PeopleShipHomeListComponent({
publishCount: this.publishCount,
creatorId: this.creatorId
})
// Column(){
//
//
// }.height('100%')
}
.width("100%")
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Start)
// .height('100%')
// .height(this.publishCount == 0 ? '100%' : '')
}
.scrollable(ScrollDirection.Vertical)
// .alignSelf(ItemAlign.Start)
// .align(Alignment.Start)
.edgeEffect(EdgeEffect.None)
.friction(0.7)
.backgroundColor(Color.White)
.scrollBar(BarState.Off)
.width('100%')
.height('calc(100% - 44vp)')
// .layoutWeight(1)
.layoutWeight(1)
// .scrollable(ScrollDirection.Vertical)
// .edgeEffect(EdgeEffect.None)
// .friction(0.7)
// .backgroundColor(Color.White)
// .scrollBar(BarState.Off)
// .width('100%')
// .height('calc(100% - 44vp)')
.onDidScroll(() => {
// this.topOpacity = yOffset / (this.getDeviceHeight() * 0.2)
this.topOpacity = this.scroller.currentOffset().yOffset / 100
this.topOpacity = this.scroller.currentOffset().yOffset / 120
if (this.scroller.currentOffset().yOffset >= this.topHeight - 66) {
this.attentionOpacity = true
} else {
... ... @@ -146,9 +144,6 @@ struct PeopleShipHomePage {
})
}
}
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.Start)
.width('100%')
.margin({top:px2vp(this.topSafeHeight)})
}
.width('100%')
... ... @@ -177,6 +172,29 @@ struct PeopleShipHomePage {
}
}
@Builder peopleHomeTitleTransparent() {
RelativeContainer() {
//标题栏目
Image($r('app.media.icon_arrow_left_white') )
.width(24)
.height(24)
.objectFit(ImageFit.Auto)
.id("back_icon")
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
.margin({ left: 18 })
.onClick(() => {
router.back()
})
}
.visibility(this.topOpacity > 0 ? 1 : 0)
.height(44)
.width('100%')
.backgroundColor($r('app.color.color_transparent'))
}
aboutToAppear() {
this.getData()
}
... ... @@ -256,3 +274,5 @@ struct PeopleShipHomePage {
}
}
... ...
... ... @@ -15,129 +15,162 @@ export struct PeopleShipHomePageNavComponent {
@Prop detailModel: PeopleShipUserDetailData = {} as PeopleShipUserDetailData
build() {
Row() {
Stack({ alignContent: Alignment.TopStart }) {
Row()
.width('100%')
.height('100%')
.backgroundColor($r('app.color.white'))
.opacity(this.topOpacity)
Row() {
RelativeContainer() {
Row() {
// 返回
Image((this.topOpacity > 0.5 ? $r('app.media.icon_arrow_left') : $r('app.media.icon_arrow_left_white')))
.width('24vp')
.height('24vp')
.objectFit(ImageFit.Auto)
.id("back_icon")
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
.margin({ left: 18 })
.onClick(() => {
router.back()
})
// 头像
PeopleShipHomePageHeadComponent({
diameter: 30,
iconDiameter: 10,
headPhotoUrl: (this.detailModel.headPhotoUrl && this.detailModel.headPhotoUrl.length > 0 ) ? this.detailModel.headPhotoUrl : $r('app.media.WDAccountOwnerHedaerDefaultIcon'),
authIcon: this.detailModel.authIcon
}).onClick(()=>{
let params = {
'headPhotoUrl': this.detailModel.headPhotoUrl,
} as Record<string, string>;
WDRouterRule.jumpWithPage(WDRouterPage.showHomePageHeaderPage,params)
}).margin({
left: '10vp',
})
.id("Page_Head")
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
left: { anchor: "back_icon", align: HorizontalAlign.End }
})
.visibility((this.topOpacity > 0.5 ? Visibility.Visible : Visibility.Hidden))
Row() {
// 返回
Image((this.topOpacity > 0.5 ? $r('app.media.icon_arrow_left') : $r('app.media.icon_arrow_left_white')))
.width('24vp')
.height('24vp')
.objectFit(ImageFit.Auto)
.margin({ left: '10vp' })
.onClick(() => {
router.back()
})
// 头像
PeopleShipHomePageHeadComponent({
diameter: 30,
iconDiameter: 10,
headPhotoUrl: (this.detailModel.headPhotoUrl && this.detailModel.headPhotoUrl.length > 0 ) ? this.detailModel.headPhotoUrl : $r('app.media.WDAccountOwnerHedaerDefaultIcon'),
authIcon: this.detailModel.authIcon
}).onClick(()=>{
let params = {
'headPhotoUrl': this.detailModel.headPhotoUrl,
} as Record<string, string>;
WDRouterRule.jumpWithPage(WDRouterPage.showHomePageHeaderPage,params)
}).margin({
left: '10vp',
})
.visibility((this.topOpacity > 0.5 ? Visibility.Visible : Visibility.Hidden))
// 文字
Text(this.detailModel.userName)
.height('46vp')
.fontSize($r('app.float.vp_14'))
.fontColor($r('app.color.color_222222'))
.margin({
left: '6vp'
})
.id("user_Head")
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
left: { anchor: "Page_Head", align: HorizontalAlign.End }
})
.visibility((this.topOpacity > 0.5 ? Visibility.Visible : Visibility.Hidden))
// 文字
Text(this.detailModel.userName)
.height('46vp')
.fontSize($r('app.float.vp_14'))
.fontColor($r('app.color.color_222222'))
.margin({
left: '6vp'
})
.visibility((this.topOpacity > 0.5 ? Visibility.Visible : Visibility.Hidden))
if (this.isAttention == '0') {
// 关注
Button({ type: ButtonType.Normal, stateEffect: true }) {
Row(){
Image($r('app.media.people_ship_top_add'))
.objectFit(ImageFit.Auto)
.width('13vp')
.height('13pv')
.margin({
right: '3vp'
})
Text('关注')
.fontSize($r('app.float.vp_12'))
.fontColor(Color.White)
.height('100%')
}
.alignSelf(ItemAlign.Center)
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
}
.borderRadius(4)
.backgroundColor($r('app.color.color_ED2800'))
.width('54vp')
.height('24vp')
.onClick(() => {
if (this.isLoadingAttention){
return
}
this.isLoadingAttention = true
})
if (this.isAttention == '0') {
// 关注
Button({ type: ButtonType.Normal, stateEffect: true }) {
Row(){
Image($r('app.media.people_ship_top_add'))
.objectFit(ImageFit.Auto)
.width('13vp')
.height('13pv')
.margin({
left: '12vp',
})
.padding(0)
.visibility((this.attentionOpacity ? Visibility.Visible : Visibility.Hidden))
} else {
Button('已关注', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(4)
.backgroundColor($r('app.color.color_F5F5F5'))
.width('54vp')
.height('24vp')
.onClick(() => {
if (this.isLoadingAttention){
return
}
this.isLoadingAttention = true
right: '3vp'
})
.margin({
left: '12vp',
})
.padding(0)
Text('关注')
.fontSize($r('app.float.vp_12'))
.fontColor($r('app.color.color_999999'))
.visibility((this.attentionOpacity ? Visibility.Visible : Visibility.Hidden))
.fontColor(Color.White)
.height('100%')
}
.alignSelf(ItemAlign.Center)
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
}
.height('100%')
Blank()
// 分享 分享暂不展示
// Image((this.topOpacity > 0.5 ? $r('app.media.icon_forward') : $r('app.media.icon_share')))
// .width('24vp')
// .height('24vp')
// .objectFit(ImageFit.Auto)
// .margin({ right: '10vp' })
// .onClick(() => {
// ToastUtils.showToast('分享为公共方法，待开发', 1000);
// })
.id("Button_Head")
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
left: { anchor: "user_Head", align: HorizontalAlign.End }
})
.borderRadius(4)
.backgroundColor($r('app.color.color_ED2800'))
.width('54vp')
.height('24vp')
.onClick(() => {
if (this.isLoadingAttention){
return
}
this.isLoadingAttention = true
})
.margin({
left: '12vp',
})
.padding(0)
.visibility((this.attentionOpacity ? Visibility.Visible : Visibility.Hidden))
} else {
Button('已关注', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(4)
.backgroundColor($r('app.color.color_F5F5F5'))
.width('54vp')
.height('24vp')
.onClick(() => {
if (this.isLoadingAttention){
return
}
this.isLoadingAttention = true
})
.margin({
left: '12vp',
})
.id("Button_Head")
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
left: { anchor: "user_Head", align: HorizontalAlign.End }
})
.padding(0)
.fontSize($r('app.float.vp_12'))
.fontColor($r('app.color.color_999999'))
.visibility((this.attentionOpacity ? Visibility.Visible : Visibility.Hidden))
}
.width('100%')
.height('100%')
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
}
.zIndex(1000)
.width('100%')
.height('100%')
}
.height(44)
.width('100%')
.backgroundColor($r('app.color.white'))
.visibility(this.topOpacity > 0 ? 0 : 1)
.opacity(this.topOpacity )
// Row() {
// Stack({ alignContent: Alignment.TopStart }) {
// Row()
// .width('100%')
// .height('100%')
// .backgroundColor($r('app.color.white'))
// .opacity(this.topOpacity)
// Row() {
//
// Blank()
// // 分享 分享暂不展示
// // Image((this.topOpacity > 0.5 ? $r('app.media.icon_forward') : $r('app.media.icon_share')))
// // .width('24vp')
// // .height('24vp')
// // .objectFit(ImageFit.Auto)
// // .margin({ right: '10vp' })
// // .onClick(() => {
// // ToastUtils.showToast('分享为公共方法，待开发', 1000);
// // })
// }
// .width('100%')
// .height('100%')
// .alignItems(VerticalAlign.Center)
// .justifyContent(FlexAlign.SpaceBetween)
// }
// .zIndex(1000)
// .width('100%')
// .height('100%')
// }
}
}
\ No newline at end of file
... ...
... ... @@ -37,13 +37,13 @@ export struct PeopleShipHomePageTopComponent {
Column() {
Stack({ alignContent: Alignment.TopStart }) {
// 顶部图片
Image($r('app.media.home_page_bg'))
.width('100%')
.height('48vp')
.objectFit(ImageFit.Auto)
.objectRepeat(ImageRepeat.NoRepeat)
.objectFit(ImageFit.Auto)
.backgroundColor(Color.White)
// Image($r('app.media.home_page_bg'))
// .width('100%')
// .height(120)
// .objectFit(ImageFit.Auto)
// .objectRepeat(ImageRepeat.NoRepeat)
// .objectFit(ImageFit.Auto)
// .backgroundColor(Color.White)
// 头像和名称
Row() {
// 头像
... ... @@ -264,7 +264,7 @@ export struct PeopleShipHomePageTopComponent {
.height('6vp')
}
.width('100%')
.backgroundColor(Color.White)
.backgroundColor($r('app.color.color_transparent'))
}
... ...