developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yangchenggong1_wd
2bca37ba 1 parent 63fcc4b0

fix:bug[17399] 号主页-关注列表_向左滑动未露出展示当前展示页的tab

Inline Side-by-side
Showing 4 changed files with 94 additions and 66 deletions
... ... @@ -10,7 +10,10 @@ const TAG = "FollowFirstTabsComponent"
export struct FollowFirstTabsComponent{
@State currentIndex: number = 0
@Prop changeIndex: number
private controller: TabsController = new TabsController()
private swiperController: SwiperController = new SwiperController()
private listScroller: Scroller = new Scroller()
@State data:FollowListItem[] = []
fontColor: string = '#999999'
selectedFontColor: string = '#000000'
... ... @@ -20,7 +23,7 @@ export struct FollowFirstTabsComponent{
this.getFollowTabList()
EmitterUtils.receiveEvent(EmitterEventId.MY_FOLLOW_EMPTY, (() => {
if(this.controller != null && this.data.length>1 ){
if(this.swiperController != null && this.data.length>1 ){
this.jumpFollowNextPage()
}
}))
... ... @@ -33,7 +36,7 @@ export struct FollowFirstTabsComponent{
this.data.push(element)
})
if(this.controller != null && this.data.length>1 && this.changeIndex === 1){
if(this.swiperController != null && this.data.length>1 && this.changeIndex === 1){
this.jumpFollowNextPage()
}
}).catch((err:Error)=>{
... ... @@ -45,7 +48,7 @@ export struct FollowFirstTabsComponent{
//个人主页 跳转 关注页 tab 2
let intervalID = setInterval(() => {
this.currentIndex = 1
this.controller.changeIndex(this.currentIndex)
this.swiperController.changeIndex(this.currentIndex)
clearInterval(intervalID);
}, 500);
}
... ... @@ -70,7 +73,8 @@ export struct FollowFirstTabsComponent{
}
}.onClick(()=>{
this.currentIndex = index
this.controller.changeIndex(this.currentIndex)
this.swiperController.changeIndex(this.currentIndex)
this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER)
trackTabFirstClick(item.directoryName)
})
.height('100%')
... ... @@ -90,28 +94,38 @@ export struct FollowFirstTabsComponent{
.layoutWeight(1)
.width('100%')
}else{
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
ForEach(this.data, (item: FollowListItem, index: number ) => {
TabContent(){
Column(){
List({ scroller: this.listScroller }){
ForEach(this.data, (item: FollowListItem, index: number ) => {
ListItem(){
this.TabBuilder(index,item)
}
}, (item: FollowListItem, index: number) => index.toString())
}.listDirection(Axis.Horizontal)
.backgroundColor($r('app.color.white'))
.width("100%")
.height("84lpx")
.edgeEffect(EdgeEffect.None)
.scrollBar(BarState.Off)
Swiper(this.swiperController){
ForEach(this.data, (item: FollowListItem, index: number ) => {
FollowSecondTabsComponent({data:$data,firstIndex:index})
}.tabBar(this.TabBuilder(index,item))
.backgroundColor($r('app.color.white'))
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
}, (item: FollowListItem, index: number) => index.toString())
}
.vertical(false)
.barMode(BarMode.Scrollable)
.barWidth('100%')
.barBackgroundColor($r('app.color.white'))
.barHeight('84lpx')
.animationDuration(0)
.onChange((index: number) => {
this.currentIndex = index
trackTabFirstClick(this.data[index].directoryName)
})
.width('100%')
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
.layoutWeight(1)
.backgroundColor($r('app.color.white'))
}, (item: FollowListItem, index: number) => index.toString())
}
.onChange((index: number) => {
this.currentIndex = index
trackTabFirstClick(this.data[index].directoryName)
this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER)
})
.width('100%')
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
.layoutWeight(1)
.loop(false)
.indicator(false)
.effectMode(EdgeEffect.None)
}.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
}
}.width('100%')
.height("100%")
... ...
... ... @@ -98,6 +98,7 @@ export struct FollowListDetailUI {
ListItem() {
ListHasNoMoreDataUI()
}
.margin({bottom:"40lpx"})
}
}
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
... ...
... ... @@ -7,7 +7,7 @@ export struct FollowSecondTabsComponent{
@Link data:FollowListItem[]
@State firstIndex:number = 0
@State currentIndex: number = 0
private controller: TabsController = new TabsController()
private swiperController: SwiperController = new SwiperController()
fontColor: string = '#000000'
selectedFontColor: string = '#ED2800'
... ... @@ -77,20 +77,16 @@ export struct FollowSecondTabsComponent{
.alignItems(VerticalAlign.Top)
.height('100%')
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
Swiper(this.swiperController ) {
ForEach(this.data[this.firstIndex].children, (item: FollowSecondListItem, index: number ) => {
TabContent(){
FollowThirdTabsComponent({data:$data,firstIndex:$firstIndex,secondIndex:index})
}.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
FollowThirdTabsComponent({data:$data,firstIndex:$firstIndex,secondIndex:index})
}, (item: FollowListItem, index: number) => index.toString())
}
.loop(false)
.vertical(true)
.barMode(BarMode.Scrollable)
.animationDuration(0)
.onChange((index: number) => {
this.currentIndex = index
})
.barWidth(0)
.indicator(false)
.disableSwipe(true)
.effectMode(EdgeEffect.None)
.height('100%')
.layoutWeight(1)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
... ... @@ -110,7 +106,7 @@ export struct FollowSecondTabsComponent{
}
.onClick(()=>{
this.currentIndex = index
this.controller.changeIndex(this.currentIndex)
this.swiperController.changeIndex(this.currentIndex)
})
.justifyContent(FlexAlign.Center)
.height('84lpx')
... ...
... ... @@ -10,8 +10,8 @@ export struct FollowThirdTabsComponent{
@Link firstIndex: number
@State secondIndex:number = -1
private controller: TabsController = new TabsController()
private swiperController: SwiperController = new SwiperController()
private listScroller: Scroller = new Scroller()
fontColor: string = '#666666'
selectedFontColor: string = '#222222'
... ... @@ -50,7 +50,8 @@ export struct FollowThirdTabsComponent{
}
.onClick(()=>{
this.currentIndex = index
this.controller.changeIndex(this.currentIndex)
this.swiperController.changeIndex(this.currentIndex)
this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER)
})
.offset({x:index === 0?"0lpx":"-5lpx"})
.height('80lpx')
... ... @@ -62,31 +63,47 @@ export struct FollowThirdTabsComponent{
@Builder FollowThirdUI(){
Column(){
Column() {
// 页签
Row() {
Scroll() {
Row() {
ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => {
this.TabBuilder(index,item)
})
}
.justifyContent(FlexAlign.Start)
List({ scroller: this.listScroller }){
ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => {
ListItem(){
this.TabBuilder(index,item)
}
.align(Alignment.Start)
.scrollable(ScrollDirection.Horizontal)
.scrollBar(BarState.Off)
.width('100%')
.padding({left:'31lpx',right:'48lpx'})
}
.alignItems(VerticalAlign.Bottom)
.width('100%')
})
}
.backgroundColor($r('app.color.white'))
.alignItems(HorizontalAlign.Start)
.edgeEffect(EdgeEffect.None)
.scrollBar(BarState.Off)
.listDirection(Axis.Horizontal)
.width('100%')
.height("84lpx")
.padding({left:'31lpx',right:'48lpx'})
// Column() {
// // 页签
// Row() {
// Scroll() {
// Row() {
// ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => {
// this.TabBuilder(index,item)
// })
// }
// .justifyContent(FlexAlign.Start)
// }
// .align(Alignment.Start)
// .scrollable(ScrollDirection.Horizontal)
// .scrollBar(BarState.Off)
// .width('100%')
// .padding({left:'31lpx',right:'48lpx'})
// }
// .alignItems(VerticalAlign.Bottom)
// .width('100%')
// }
// .backgroundColor($r('app.color.white'))
// .alignItems(HorizontalAlign.Start)
// .width('100%')
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
Swiper(this.swiperController ) {
ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => {
TabContent(){
Column(){
... ... @@ -96,12 +113,12 @@ export struct FollowThirdTabsComponent{
.backgroundColor($r('app.color.white'))
}, (item: FollowListItem, index: number) => index.toString())
}
.barHeight(0)
.vertical(false)
.barMode(BarMode.Scrollable)
.animationDuration(0)
.loop(false)
.indicator(false)
.disableSwipe(true)
.effectMode(EdgeEffect.None)
.onChange((index: number) => {
this.currentIndex = index
// this.currentIndex = index
})
.width('100%')
.layoutWeight(1)
... ...