Showing
2 changed files
with
35 additions
and
34 deletions
| @@ -12,56 +12,33 @@ export struct TabComponent { | @@ -12,56 +12,33 @@ export struct TabComponent { | ||
| 12 | @State fontColor: string = '#999999' | 12 | @State fontColor: string = '#999999' |
| 13 | @State selectedFontColor: string = '#222222' | 13 | @State selectedFontColor: string = '#222222' |
| 14 | @State currentIndex: number = 0 | 14 | @State currentIndex: number = 0 |
| 15 | - private controller: TabsController = new TabsController() | 15 | + // private controller: TabsController = new TabsController() |
| 16 | + private swiperController: SwiperController = new SwiperController() | ||
| 16 | @Prop tabs: string[] = [] | 17 | @Prop tabs: string[] = [] |
| 17 | - @Prop lastInputedLiveComment: LiveRoomItemBean // 上次输入的直播间消息 | ||
| 18 | - @Prop lastInputedChatComment: LiveRoomItemBean // 上次输入的大家聊消息 | 18 | + @Prop lastInputedLiveComment: LiveRoomItemBean // 上次输入的直播间消息 |
| 19 | + @Prop lastInputedChatComment: LiveRoomItemBean // 上次输入的大家聊消息 | ||
| 19 | 20 | ||
| 20 | aboutToAppear(): void { | 21 | aboutToAppear(): void { |
| 21 | 22 | ||
| 22 | } | 23 | } |
| 24 | + | ||
| 23 | /** | 25 | /** |
| 24 | * 评论切换到大家聊 | 26 | * 评论切换到大家聊 |
| 25 | */ | 27 | */ |
| 26 | changeToChart() { | 28 | changeToChart() { |
| 27 | const index = this.tabs.findIndex(item => item === '大家聊') | 29 | const index = this.tabs.findIndex(item => item === '大家聊') |
| 28 | if (index !== -1) { | 30 | if (index !== -1) { |
| 29 | - this.controller.changeIndex(index) | 31 | + this.swiperController.changeIndex(index) |
| 30 | } | 32 | } |
| 31 | } | 33 | } |
| 32 | 34 | ||
| 33 | build() { | 35 | build() { |
| 34 | - Stack({alignContent: Alignment.TopStart}) { | ||
| 35 | - Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) { | ||
| 36 | - ForEach(this.tabs, (item: string, index: number) => { | ||
| 37 | - TabContent() { | ||
| 38 | - if ('简介' === item) { | ||
| 39 | - TabInfoComponent() | ||
| 40 | - } else if ('直播间' === item) { | ||
| 41 | - TabLiveComponent({lastInputedComment: this.lastInputedLiveComment}) | ||
| 42 | - } else if ('大家聊' === item) { | ||
| 43 | - TabChatComponent({lastInputedComment: this.lastInputedChatComment}) | ||
| 44 | - } | ||
| 45 | - } | ||
| 46 | - .backgroundColor('#F5F5F5') | ||
| 47 | - }, (item: string, index: number) => { | ||
| 48 | - return item + index | ||
| 49 | - }) | ||
| 50 | - } | ||
| 51 | - .layoutWeight(1) | ||
| 52 | - .vertical(false) | ||
| 53 | - .barMode(BarMode.Fixed) | ||
| 54 | - .barHeight(48) | ||
| 55 | - .animationDuration(100) | ||
| 56 | - .onChange((index: number) => { | ||
| 57 | - this.currentIndex = index | ||
| 58 | - }) | ||
| 59 | - .backgroundColor(Color.White) | 36 | + Column() { |
| 60 | 37 | ||
| 61 | // 页签 | 38 | // 页签 |
| 62 | Row() { | 39 | Row() { |
| 63 | Scroll() { | 40 | Scroll() { |
| 64 | - Row({space: '24vp'}) { | 41 | + Row({ space: '24vp' }) { |
| 65 | ForEach(this.tabs, (item: string, index: number) => { | 42 | ForEach(this.tabs, (item: string, index: number) => { |
| 66 | this.tabBuilder(index, item) | 43 | this.tabBuilder(index, item) |
| 67 | }) | 44 | }) |
| @@ -79,8 +56,33 @@ export struct TabComponent { | @@ -79,8 +56,33 @@ export struct TabComponent { | ||
| 79 | .height('48vp') | 56 | .height('48vp') |
| 80 | .alignItems(VerticalAlign.Bottom) | 57 | .alignItems(VerticalAlign.Bottom) |
| 81 | .width('100%') | 58 | .width('100%') |
| 82 | - }.layoutWeight(1) | ||
| 83 | 59 | ||
| 60 | + Swiper(this.swiperController) { | ||
| 61 | + ForEach(this.tabs, (item: string, index: number) => { | ||
| 62 | + if ('简介' === item) { | ||
| 63 | + TabInfoComponent().backgroundColor('#F5F5F5') | ||
| 64 | + } else if ('直播间' === item) { | ||
| 65 | + TabLiveComponent({ lastInputedComment: this.lastInputedLiveComment }).backgroundColor('#F5F5F5') | ||
| 66 | + } else if ('大家聊' === item) { | ||
| 67 | + TabChatComponent({ lastInputedComment: this.lastInputedChatComment }).backgroundColor('#F5F5F5') | ||
| 68 | + } | ||
| 69 | + | ||
| 70 | + }, (item: string, index: number) => { | ||
| 71 | + return item + index | ||
| 72 | + }) | ||
| 73 | + } | ||
| 74 | + .layoutWeight(1) | ||
| 75 | + .vertical(false) | ||
| 76 | + .indicator(false) | ||
| 77 | + .loop(false) | ||
| 78 | + .alignSelf(ItemAlign.Start) | ||
| 79 | + .effectMode(EdgeEffect.None) | ||
| 80 | + .onChange((index: number) => { | ||
| 81 | + this.currentIndex = index | ||
| 82 | + }) | ||
| 83 | + .backgroundColor(Color.White) | ||
| 84 | + | ||
| 85 | + }.layoutWeight(1) | ||
| 84 | 86 | ||
| 85 | } | 87 | } |
| 86 | 88 | ||
| @@ -102,7 +104,7 @@ export struct TabComponent { | @@ -102,7 +104,7 @@ export struct TabComponent { | ||
| 102 | .constraintSize({ minWidth: 35 }) | 104 | .constraintSize({ minWidth: 35 }) |
| 103 | .height('48vp') | 105 | .height('48vp') |
| 104 | .onClick(() => { | 106 | .onClick(() => { |
| 105 | - this.controller.changeIndex(index) | 107 | + this.swiperController.changeIndex(index) |
| 106 | this.currentIndex = index | 108 | this.currentIndex = index |
| 107 | }) | 109 | }) |
| 108 | } | 110 | } |
| @@ -169,7 +169,6 @@ export struct VideoChannelPage { | @@ -169,7 +169,6 @@ export struct VideoChannelPage { | ||
| 169 | }, (item: TopNavDTO) => item.channelId + '') | 169 | }, (item: TopNavDTO) => item.channelId + '') |
| 170 | } | 170 | } |
| 171 | .indicator(false) | 171 | .indicator(false) |
| 172 | - .disableSwipe(true) | ||
| 173 | .loop(false) | 172 | .loop(false) |
| 174 | .width('100%') | 173 | .width('100%') |
| 175 | .height('100%') | 174 | .height('100%') |
-
Please register or login to post a comment