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 79 additions and 51 deletions
@@ -10,7 +10,10 @@ const TAG = "FollowFirstTabsComponent" @@ -10,7 +10,10 @@ const TAG = "FollowFirstTabsComponent"
10 export struct FollowFirstTabsComponent{ 10 export struct FollowFirstTabsComponent{
11 @State currentIndex: number = 0 11 @State currentIndex: number = 0
12 @Prop changeIndex: number 12 @Prop changeIndex: number
13 - private controller: TabsController = new TabsController() 13 +
  14 + private swiperController: SwiperController = new SwiperController()
  15 + private listScroller: Scroller = new Scroller()
  16 +
14 @State data:FollowListItem[] = [] 17 @State data:FollowListItem[] = []
15 fontColor: string = '#999999' 18 fontColor: string = '#999999'
16 selectedFontColor: string = '#000000' 19 selectedFontColor: string = '#000000'
@@ -20,7 +23,7 @@ export struct FollowFirstTabsComponent{ @@ -20,7 +23,7 @@ export struct FollowFirstTabsComponent{
20 this.getFollowTabList() 23 this.getFollowTabList()
21 24
22 EmitterUtils.receiveEvent(EmitterEventId.MY_FOLLOW_EMPTY, (() => { 25 EmitterUtils.receiveEvent(EmitterEventId.MY_FOLLOW_EMPTY, (() => {
23 - if(this.controller != null && this.data.length>1 ){ 26 + if(this.swiperController != null && this.data.length>1 ){
24 this.jumpFollowNextPage() 27 this.jumpFollowNextPage()
25 } 28 }
26 })) 29 }))
@@ -33,7 +36,7 @@ export struct FollowFirstTabsComponent{ @@ -33,7 +36,7 @@ export struct FollowFirstTabsComponent{
33 this.data.push(element) 36 this.data.push(element)
34 }) 37 })
35 38
36 - if(this.controller != null && this.data.length>1 && this.changeIndex === 1){ 39 + if(this.swiperController != null && this.data.length>1 && this.changeIndex === 1){
37 this.jumpFollowNextPage() 40 this.jumpFollowNextPage()
38 } 41 }
39 }).catch((err:Error)=>{ 42 }).catch((err:Error)=>{
@@ -45,7 +48,7 @@ export struct FollowFirstTabsComponent{ @@ -45,7 +48,7 @@ export struct FollowFirstTabsComponent{
45 //个人主页 跳转 关注页 tab 2 48 //个人主页 跳转 关注页 tab 2
46 let intervalID = setInterval(() => { 49 let intervalID = setInterval(() => {
47 this.currentIndex = 1 50 this.currentIndex = 1
48 - this.controller.changeIndex(this.currentIndex) 51 + this.swiperController.changeIndex(this.currentIndex)
49 clearInterval(intervalID); 52 clearInterval(intervalID);
50 }, 500); 53 }, 500);
51 } 54 }
@@ -70,7 +73,8 @@ export struct FollowFirstTabsComponent{ @@ -70,7 +73,8 @@ export struct FollowFirstTabsComponent{
70 } 73 }
71 }.onClick(()=>{ 74 }.onClick(()=>{
72 this.currentIndex = index 75 this.currentIndex = index
73 - this.controller.changeIndex(this.currentIndex) 76 + this.swiperController.changeIndex(this.currentIndex)
  77 + this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER)
74 trackTabFirstClick(item.directoryName) 78 trackTabFirstClick(item.directoryName)
75 }) 79 })
76 .height('100%') 80 .height('100%')
@@ -90,28 +94,38 @@ export struct FollowFirstTabsComponent{ @@ -90,28 +94,38 @@ export struct FollowFirstTabsComponent{
90 .layoutWeight(1) 94 .layoutWeight(1)
91 .width('100%') 95 .width('100%')
92 }else{ 96 }else{
93 - Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 97 + Column(){
  98 + List({ scroller: this.listScroller }){
  99 + ForEach(this.data, (item: FollowListItem, index: number ) => {
  100 + ListItem(){
  101 + this.TabBuilder(index,item)
  102 + }
  103 + }, (item: FollowListItem, index: number) => index.toString())
  104 + }.listDirection(Axis.Horizontal)
  105 + .backgroundColor($r('app.color.white'))
  106 + .width("100%")
  107 + .height("84lpx")
  108 + .edgeEffect(EdgeEffect.None)
  109 + .scrollBar(BarState.Off)
  110 +
  111 + Swiper(this.swiperController){
94 ForEach(this.data, (item: FollowListItem, index: number ) => { 112 ForEach(this.data, (item: FollowListItem, index: number ) => {
95 - TabContent(){  
96 FollowSecondTabsComponent({data:$data,firstIndex:index}) 113 FollowSecondTabsComponent({data:$data,firstIndex:index})
97 - }.tabBar(this.TabBuilder(index,item))  
98 .backgroundColor($r('app.color.white')) 114 .backgroundColor($r('app.color.white'))
99 - .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])  
100 }, (item: FollowListItem, index: number) => index.toString()) 115 }, (item: FollowListItem, index: number) => index.toString())
101 } 116 }
102 - .vertical(false)  
103 - .barMode(BarMode.Scrollable)  
104 - .barWidth('100%')  
105 - .barBackgroundColor($r('app.color.white'))  
106 - .barHeight('84lpx')  
107 - .animationDuration(0)  
108 .onChange((index: number) => { 117 .onChange((index: number) => {
109 this.currentIndex = index 118 this.currentIndex = index
110 trackTabFirstClick(this.data[index].directoryName) 119 trackTabFirstClick(this.data[index].directoryName)
  120 + this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER)
111 }) 121 })
112 .width('100%') 122 .width('100%')
113 .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) 123 .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
114 .layoutWeight(1) 124 .layoutWeight(1)
  125 + .loop(false)
  126 + .indicator(false)
  127 + .effectMode(EdgeEffect.None)
  128 + }.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
115 } 129 }
116 }.width('100%') 130 }.width('100%')
117 .height("100%") 131 .height("100%")
@@ -98,6 +98,7 @@ export struct FollowListDetailUI { @@ -98,6 +98,7 @@ export struct FollowListDetailUI {
98 ListItem() { 98 ListItem() {
99 ListHasNoMoreDataUI() 99 ListHasNoMoreDataUI()
100 } 100 }
  101 + .margin({bottom:"40lpx"})
101 } 102 }
102 } 103 }
103 .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) 104 .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
@@ -7,7 +7,7 @@ export struct FollowSecondTabsComponent{ @@ -7,7 +7,7 @@ export struct FollowSecondTabsComponent{
7 @Link data:FollowListItem[] 7 @Link data:FollowListItem[]
8 @State firstIndex:number = 0 8 @State firstIndex:number = 0
9 @State currentIndex: number = 0 9 @State currentIndex: number = 0
10 - private controller: TabsController = new TabsController() 10 + private swiperController: SwiperController = new SwiperController()
11 fontColor: string = '#000000' 11 fontColor: string = '#000000'
12 selectedFontColor: string = '#ED2800' 12 selectedFontColor: string = '#ED2800'
13 13
@@ -77,20 +77,16 @@ export struct FollowSecondTabsComponent{ @@ -77,20 +77,16 @@ export struct FollowSecondTabsComponent{
77 .alignItems(VerticalAlign.Top) 77 .alignItems(VerticalAlign.Top)
78 .height('100%') 78 .height('100%')
79 79
80 - Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 80 + Swiper(this.swiperController ) {
81 ForEach(this.data[this.firstIndex].children, (item: FollowSecondListItem, index: number ) => { 81 ForEach(this.data[this.firstIndex].children, (item: FollowSecondListItem, index: number ) => {
82 - TabContent(){  
83 FollowThirdTabsComponent({data:$data,firstIndex:$firstIndex,secondIndex:index}) 82 FollowThirdTabsComponent({data:$data,firstIndex:$firstIndex,secondIndex:index})
84 - }.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])  
85 }, (item: FollowListItem, index: number) => index.toString()) 83 }, (item: FollowListItem, index: number) => index.toString())
86 } 84 }
  85 + .loop(false)
87 .vertical(true) 86 .vertical(true)
88 - .barMode(BarMode.Scrollable)  
89 - .animationDuration(0)  
90 - .onChange((index: number) => {  
91 - this.currentIndex = index  
92 - })  
93 - .barWidth(0) 87 + .indicator(false)
  88 + .disableSwipe(true)
  89 + .effectMode(EdgeEffect.None)
94 .height('100%') 90 .height('100%')
95 .layoutWeight(1) 91 .layoutWeight(1)
96 .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) 92 .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
@@ -110,7 +106,7 @@ export struct FollowSecondTabsComponent{ @@ -110,7 +106,7 @@ export struct FollowSecondTabsComponent{
110 } 106 }
111 .onClick(()=>{ 107 .onClick(()=>{
112 this.currentIndex = index 108 this.currentIndex = index
113 - this.controller.changeIndex(this.currentIndex) 109 + this.swiperController.changeIndex(this.currentIndex)
114 }) 110 })
115 .justifyContent(FlexAlign.Center) 111 .justifyContent(FlexAlign.Center)
116 .height('84lpx') 112 .height('84lpx')
@@ -10,8 +10,8 @@ export struct FollowThirdTabsComponent{ @@ -10,8 +10,8 @@ export struct FollowThirdTabsComponent{
10 @Link firstIndex: number 10 @Link firstIndex: number
11 @State secondIndex:number = -1 11 @State secondIndex:number = -1
12 12
13 -  
14 - private controller: TabsController = new TabsController() 13 + private swiperController: SwiperController = new SwiperController()
  14 + private listScroller: Scroller = new Scroller()
15 fontColor: string = '#666666' 15 fontColor: string = '#666666'
16 selectedFontColor: string = '#222222' 16 selectedFontColor: string = '#222222'
17 17
@@ -50,7 +50,8 @@ export struct FollowThirdTabsComponent{ @@ -50,7 +50,8 @@ export struct FollowThirdTabsComponent{
50 } 50 }
51 .onClick(()=>{ 51 .onClick(()=>{
52 this.currentIndex = index 52 this.currentIndex = index
53 - this.controller.changeIndex(this.currentIndex) 53 + this.swiperController.changeIndex(this.currentIndex)
  54 + this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER)
54 }) 55 })
55 .offset({x:index === 0?"0lpx":"-5lpx"}) 56 .offset({x:index === 0?"0lpx":"-5lpx"})
56 .height('80lpx') 57 .height('80lpx')
@@ -62,31 +63,47 @@ export struct FollowThirdTabsComponent{ @@ -62,31 +63,47 @@ export struct FollowThirdTabsComponent{
62 @Builder FollowThirdUI(){ 63 @Builder FollowThirdUI(){
63 64
64 Column(){ 65 Column(){
65 - Column() {  
66 - // 页签  
67 - Row() {  
68 - Scroll() {  
69 - Row() { 66 +
  67 + List({ scroller: this.listScroller }){
70 ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => { 68 ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => {
  69 + ListItem(){
71 this.TabBuilder(index,item) 70 this.TabBuilder(index,item)
72 - })  
73 } 71 }
74 - .justifyContent(FlexAlign.Start) 72 + })
75 } 73 }
76 - .align(Alignment.Start)  
77 - .scrollable(ScrollDirection.Horizontal) 74 + .backgroundColor($r('app.color.white'))
  75 + .edgeEffect(EdgeEffect.None)
78 .scrollBar(BarState.Off) 76 .scrollBar(BarState.Off)
  77 + .listDirection(Axis.Horizontal)
79 .width('100%') 78 .width('100%')
  79 + .height("84lpx")
80 .padding({left:'31lpx',right:'48lpx'}) 80 .padding({left:'31lpx',right:'48lpx'})
81 - }  
82 - .alignItems(VerticalAlign.Bottom)  
83 - .width('100%')  
84 - }  
85 - .backgroundColor($r('app.color.white'))  
86 - .alignItems(HorizontalAlign.Start)  
87 - .width('100%')  
88 81
89 - Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 82 + // Column() {
  83 + // // 页签
  84 + // Row() {
  85 + // Scroll() {
  86 + // Row() {
  87 + // ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => {
  88 + // this.TabBuilder(index,item)
  89 + // })
  90 + // }
  91 + // .justifyContent(FlexAlign.Start)
  92 + // }
  93 + // .align(Alignment.Start)
  94 + // .scrollable(ScrollDirection.Horizontal)
  95 + // .scrollBar(BarState.Off)
  96 + // .width('100%')
  97 + // .padding({left:'31lpx',right:'48lpx'})
  98 + // }
  99 + // .alignItems(VerticalAlign.Bottom)
  100 + // .width('100%')
  101 + // }
  102 + // .backgroundColor($r('app.color.white'))
  103 + // .alignItems(HorizontalAlign.Start)
  104 + // .width('100%')
  105 +
  106 + Swiper(this.swiperController ) {
90 ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => { 107 ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => {
91 TabContent(){ 108 TabContent(){
92 Column(){ 109 Column(){
@@ -96,12 +113,12 @@ export struct FollowThirdTabsComponent{ @@ -96,12 +113,12 @@ export struct FollowThirdTabsComponent{
96 .backgroundColor($r('app.color.white')) 113 .backgroundColor($r('app.color.white'))
97 }, (item: FollowListItem, index: number) => index.toString()) 114 }, (item: FollowListItem, index: number) => index.toString())
98 } 115 }
99 - .barHeight(0)  
100 - .vertical(false)  
101 - .barMode(BarMode.Scrollable)  
102 - .animationDuration(0) 116 + .loop(false)
  117 + .indicator(false)
  118 + .disableSwipe(true)
  119 + .effectMode(EdgeEffect.None)
103 .onChange((index: number) => { 120 .onChange((index: number) => {
104 - this.currentIndex = index 121 + // this.currentIndex = index
105 }) 122 })
106 .width('100%') 123 .width('100%')
107 .layoutWeight(1) 124 .layoutWeight(1)