鸿蒙HarmonyOS NEXT入门，使用axios获取分类影片数据（七）

1. 涉及到的技术点

1. axios的使用（在第四集中，教了如何使用axios获取影片数据）
2. @Extend装饰器的使用

2. 官方文档指南

1. @Extend装饰器的使用：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-extend-V5

3.为什么要使用@Extend装饰器？

1. 官方说明：如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，我们推出了可以提炼公共样式进行复用的装饰器@Styles，@Extend
2. 在第六集中，细心的同学会发现在设置tabBar样式的时候，每个分类的样式重复了好多相同的代码，所以官方也考虑到了这个问题，建议使用装饰器来解决这个问题，看看下图没有利用装饰器写的代码
   

3. demo具体实现

1. 定义@Extend装饰器

/**
 * 1. 使用@Extend装饰器：定义扩展组件样式
 * 2. 如何使用？
 *   官网文档指南：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-extend-V5
 */
@Extend(TabContent)
function funcCategoryTextStyle(titleName: string) {
  .tabBar(SubTabBarStyle.of(titleName).indicator({
    color: '#e22418', //下划线颜色
    borderRadius: 4, //下划线圆角半径
    height: 3, //下划线高度
  })
    .labelStyle({
      selectedColor: '#e22418', //选中时的颜色
      unselectedColor: '#ff999999'   //未选中时的颜
    })
  )

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 讲了这么多，看看使用了装饰器之后的代码简洁度吧

import axios, { AxiosError, AxiosResponse } from '@ohos/axios';
import { MovieInfo, MovieInfoItem } from '../entity/MovieInfo';
import { router } from '@kit.ArkUI';

/**
 * 1. 使用@Extend装饰器：定义扩展组件样式
 * 2. 如何使用？
 *   官网文档指南：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-extend-V5
 */
@Extend(TabContent)
function funcCategoryTextStyle(titleName: string) {
  .tabBar(SubTabBarStyle.of(titleName).indicator({
    color: '#e22418', //下划线颜色
    borderRadius: 4, //下划线圆角半径
    height: 3, //下划线高度
  })
    .labelStyle({
      selectedColor: '#e22418', //选中时的颜色
      unselectedColor: '#ff999999'   //未选中时的颜
    })
  )

}

@Entry
@Component
struct CategoryPage {
  @State currentIndex: number = 0
  @State movieInfo: MovieInfo = {
    subjects: []
  }
  titles: string[] = ['最新', '华语', '欧美', '韩国', '日本', '中国香港', '中国台湾', '印度', '泰国', '其他']

  aboutToAppear(): void {
    this.getMovieListData(this.titles[0])

  }

  /**
   * 获取最近热门电影
   */
  getMovieListData(categoryName:string) {

    axios<string, AxiosResponse<string>, null>({
      method: "get",
      params:{
        'tag':categoryName
      },
      url: 'https://movie.douban.com/j/search_subjects?type=movie&page_limit=50&page_start=0'
    }).then((res: AxiosResponse) => {
      this.movieInfo = res.data

    }).catch((error: AxiosError) => {
      console.error(error.message);
    })
  }

  build() {
    Column() {
      Row() {
        Image($r('app.media.img_back')).width(26).onClick(()=>{router.back()})
        //标题栏
        Text('分类')
          .fontSize(21)
          .fontWeight(600)
      }
      .width('100%')


      //tabs页面
      Tabs() {

        ForEach(this.titles, (title: string) => {
          TabContent() {
            //电影列表，网格布局
            Grid() {
              ForEach(this.movieInfo.subjects, (item: MovieInfoItem) => {
                GridItem() {
                  Column() {
                    Image(item.cover)
                      .height(140)
                      .width('100%')
                      .objectFit(ImageFit.Cover)
                    Text(item.title)
                      .fontSize(13)
                      .margin({ top: 6 })
                      .textOverflow({
                        overflow: TextOverflow.Clip
                      })
                      .maxLines(1) //一般情况下textOverflow和maxLines配合一起使用
                  }.width('100%')
                }.onClick(() => {

                })

              })

            }
            .columnsTemplate('1fr 1fr 1fr')
            .margin({ top: 20 })
            .columnsGap(10)
            .rowsGap(10)
            .margin(10)
          }
          .funcCategoryTextStyle(title)
        })
        /**
         * 滚动导航栏可以用于顶部导航栏或者侧边导航栏的设置，
         * 内容分类较多，屏幕宽度无法容纳所有分类页签的情况下
         * ，需要使用可滚动的导航栏，支持用户点击和滑动来加载隐藏的页签内容。
         * 滚动导航栏需要设置Tabs组件的barMode属性，
         * 默认值为BarMode.Fixed表示为固定导航栏，
         * BarMode.Scrollable表示可滚动导航栏
         */
      }
      .barMode(BarMode.Scrollable)
      //设置点击TabBar页签时切换TabContent的动画形式
      .animationMode(AnimationMode.NO_ANIMATION)
      .onChange((index: number) => {
        this.movieInfo.subjects =[]
        this.getMovieListData(this.titles[index])
      })

    }
    .height('100%')
    .width('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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

获取电影数据的方法，在生命周期aboutToAppear()函数中调用

4. 运行效果图