import MinePage from './MinePage.ets';
import HomePage from './HomePage.ets';

@Entry
@Component
struct Index {
  @State tabIndex: number = 0;
  private tabSelectColor: string = "#095AF8";
  private tabColor: string = "#BFC0C2";

  build() {
    Stack({ alignContent: Alignment.BottomStart }) {
      if (this.tabIndex == 0) {
        HomePage()
      }
      if (this.tabIndex == 1) {
        MinePage()
      }
      Divider().color("#F5F5F5")
      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) {
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Image(this.tabIndex == 0 ? "/common/images/main_click.png" : "/common/images/main.png")
            .objectFit(ImageFit.Fill)
            .width(30)
            .height(30)
          Text("首页")
            .fontColor(this.tabIndex == 0 ? this.tabSelectColor : this.tabColor)
            .fontSize(14)
            .margin({ top: 3 })
        }.onClick(() => {
          this.tabIndex = 0;
        })

        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Image(this.tabIndex == 1 ? "/common/images/life_click.png" : "/common/images/life.png")
            .objectFit(ImageFit.Fill)
            .width(30)
            .height(30)
          Text("生活")
            .fontColor(this.tabIndex == 1 ? this.tabSelectColor : this.tabColor)
            .fontSize(14)
            .margin({ top: 3 })
        }.onClick(() => {
          this.tabIndex = 1;
        })
      }.width("100%")
      .height(70)
      .backgroundColor("#F3F4F6")
    }.width("100%").height("100%")
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.

import HomeSearchBar from '../components/HomeSearchBar.ets';
import HomeHeader from '../components/HomeHeader.ets';
import RecommendMenu from '../components/RecommendMenu.ets';
import NewsList from '../components/NewsList.ets';
import AdSwiper from '../components/AdSwiper.ets';
import NoticeBar from '../components/NoticeBar.ets';

@Component
struct HomePage {
  private scroller: Scroller = new Scroller()
  @State homeOpacityNumber: number = 0

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Scroll(this.scroller) {
        Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Start }) {
          HomeHeader()
          NoticeBar()
          AdSwiper()
          RecommendMenu()
          NewsList()
        }
        .width('100%')
        .backgroundColor("#F2F2F2")
      }
      .width('100%')
      .margin({ top: 60 })
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.Off)
      .onScroll((xOffset: number, yOffset: number) => {
        console.info(xOffset + ' ' + yOffset)
        this.homeOpacityNumber = (this.scroller.currentOffset().yOffset) / 100;
      })
      HomeSearchBar({ opacityNumber: this.homeOpacityNumber })
    }.width("100%")
    .height("100%")
  }
}

export default HomePage
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.