HarmonyOS NEXT：实现影戏列表功能展示界面

时至本日HarmonyOS NEXT早已发布运行了，等其正式推出并大规模商用后，HarmonyOS的汗青使命就完成并将退出汗青舞台，为用户提供丰富的应用选择。但是Harmony NEXT是在HarmonyOS根本上剔除安卓（AOSP）后的产物，属于全新的手机体系。
  本日实现一个简朴的小案例，从零开始解说怎样通过鸿蒙开辟实现一个影戏列表功能的案例。
目次
新建初始项目
菜单与影戏页
数据接口封装
加载与适配页
影戏列表界面

---

新建初始项目

进入到编辑器中点击左上角的文件点击新建项目，然后选择空的 Empty Ability 举行创建：

然后接下来输入自己的项目名称就行，点击finish即可：

运行本地预览器，可以看到我们的初始项目已经跑通：

菜单与影戏页

接下来开始编写我们雷同H5端的tabBar导航菜单按钮的功能，这里我们可以借助官网给我们提供的选项卡(Tabs)举行雷同的操纵，如下所示：

接下来我们开始使用这个tabs选项卡的功能，首选我们先在pages目次下新建两个ArkTS文件然后把这两个文件都暴袒露去，如下所示：

然后我们在index.ets文件下通过模块导入的方式，将两个文件举行一个导入，代码如下：

1. import Home from './home'
2. import Cinema from './cinema'
4. @Entry
5. @Component
6. struct Index {
7.   build() {
8.     Tabs({ barPosition: BarPosition.End }) {
9.       TabContent() {
10.         Home().height('100%')
11.       }.tabBar("电影")
12.       TabContent() {
13.         Cinema().height('100%')
14.       }.tabBar("影院")
15.     }
16.   }
17. }

复制代码

效果如下所示：

接下来我们就可以在首页组件中撰写相应的首页内容，这里我们也是借助了官方文档中的轮播器举行实现轮播图的操纵，详细的代码如下所示：

1. @Component
2. struct Home {
3.   @State flag: boolean = true
4.   imgList: string[] = [
5.     "http://124.223.69.156:5500/h5-01.jpg",
6.     "http://124.223.69.156:5500/h5-02.jpg",
7.     "http://124.223.69.156:5500/h5-03.png",
8.   ]
9.   build() {
10.     Scroll() {
11.       Column() {
12.         // 轮播图
13.         Swiper() {
14.           ForEach(this.imgList, (item: string) => {
15.             Image(item).width('100%').height(180)
16.           })
17.         }
18.         .autoPlay(true) // 自动轮播
19.         .loop(true) // 无缝衔接
20.         // 即将上映
21.         Flex({ justifyContent: FlexAlign.SpaceAround }) {
22.           Text('正在热映')
23.             .padding(10)
24.             .border({ width: { bottom: this.flag ? 3 : 0 } })
25.             .borderColor(Color.Red)
26.             .onClick(() => this.flag = true)
27.           Text('即将上映')
28.             .padding(10)
29.             .border({ width: { bottom: !this.flag ? 3 : 0 } })
30.             .borderColor(Color.Red)
31.             .onClick(() => this.flag = false)
32.         }.margin({ top: 10, bottom: 10 })
33.         if (this.flag)

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金