鸿蒙开发(六)：职位列表页面的实现

小_铁
191 阅读3分钟
🌟 使用ArkTS开发鸿蒙应用：职位列表页面的实现

职位列表页面是用户查看职位信息的重要功能模块。以下是一个完整的职位列表页面实现，包括职位搜索、列表展示、下拉刷新和上拉加载更多功能。

代码解析

1. 导入模块

import prompt from '@ohos.promptAction';
import { httpRequestGet, httpRequestPost } from '../Utils/HttpUtils';
import { PositionListModel, PositionListModelData } from '../model/PositionListModel';
import { PullToRefresh } from '@ohos/pulltorefresh';
import Logger from '../Utils/Logger';
  • 导入了多个模块，用于实现提示框、HTTP请求、职位模型、下拉刷新和日志记录等功能。

2. 定义职位列表组件

@Entry
@Component
export struct PositionList {
  private positionlike: string = "****";
  private positionlinit: string = "*****";

  @State changeValue: string = "";
  @State positionlist?: Array<PositionListModelData> = [];
  @State JokeList: Array<PositionListModelData> = [];
  @State dataList: Array<PositionListModelData> = [];
  @State curPage: number = 1;
  @State pageSize: number = 7;
  @State curnumber: number = 1;
  @State data: Array<PositionListModelData> = this.dataList;

  private scroller: Scroller = new Scroller();
  controller: SearchController = new SearchController();

  aboutToAppear() {
    this.getPositionList(this.curPage, this.pageSize);
  }

  async search(name: string) {
    let getname = 'name=';
    let searchUrl = this.positionlike + getname + name;
    httpRequestGet(searchUrl).then((data) => {
      let positionModel: PositionListModel = JSON.parse(data.toString());
      let msg = positionModel.msg;
      if (positionModel.code == 200) {
        this.positionlist = positionModel.data;
        this.dataList.length = 0;
        this.dataList = [];
        this.dataList.push(...this.positionlist);
      } else {
        prompt.showToast({
          message: msg
        });
      }
    });
  }

  async getPositionList(curPagennumber: number, pageSizenumber: number) {
    let getcurPage = 'curPage=';
    let getpageSize = '&pageSize=';
    let networkurl = this.positionlinit + getcurPage + curPagennumber + getpageSize + pageSizenumber;
    httpRequestGet(networkurl).then(data => {
      let positionModel: PositionListModel = JSON.parse(data.toString());
      console.log("data内容是" + positionModel.data);
      let msg = positionModel.msg;
      if (positionModel.code == 200) {
        this.JokeList = positionModel.data;
        this.dataList.push(...this.JokeList);
      } else {
        prompt.showToast({
          message: msg
        });
      }
    });
  }
  • 定义了一个名为 PositionList 的职位列表组件。
  • 使用 @State 装饰器定义了多个状态变量，用于存储搜索关键词、职位列表数据、当前页码、每页大小等。
  • 定义了 controller，用于管理搜索操作。
  • 在 aboutToAppear 生命周期函数中，调用 getPositionList 方法获取初始职位列表数据。
  • 定义了 search 方法，用于根据用户输入的关键词搜索职位。
  • 定义了 getPositionList 方法，用于根据当前页码和每页大小获取职位列表数据。

3. 页面布局

build() {
  Column() {
    Row() {
      Text("职位")
        .fontSize(14)
        .textAlign(TextAlign.Start)
        .margin({ left: 5 })
      Search({ value: this.changeValue, placeholder: "请输入搜索信息", controller: this.controller })
        .searchButton("搜索")
        .layoutWeight(1)
        .margin({ left: 8, right: 8 })
        .onSubmit((value) => {
          this.search(value);
        })
    }.width("100%")
    .justifyContent(FlexAlign.Start)
    .backgroundColor(Color.White)

    PullToRefresh({
      data: $data,
      scroller: this.scroller,
      customList: () => {
        this.getListView();
      },
      onRefresh: () => {
        return new Promise<string>((resolve, reject) => {
          resolve('刷新成功');
          this.dataList = [];
          this.curPage = 1;
          this.pageSize = 7;
          this.curnumber = 1;
          this.getPositionList(this.curPage, this.pageSize);
        });
      },
      onLoadMore: () => {
        return new Promise<string>((resolve, reject) => {
          this.curnumber++;
          this.curPage = this.curnumber;
          Logger.error(" this.curPage -- > " + this.curPage);
          this.pageSize = 7;
          this.getPositionList(this.curPage, this.pageSize);
          resolve('');
        });
      },
    })
  }.width("100%")
  .height("100%")
}
  • 使用 Column 和 Row 布局组件，构建职位列表页面的UI。
  • 包含一个搜索框，用户可以输入关键词进行搜索。
  • 使用 PullToRefresh 组件实现下拉刷新和上拉加载更多功能。
  • 在 onRefresh 回调中，重置数据列表并获取初始数据。
  • 在 onLoadMore 回调中，加载更多数据并更新数据列表。

4. 列表视图构建方法

@Builder
private getListView() {
  List({ space: 10, scroller: this.scroller }) {
    ForEach(this.dataList, (item: PositionListModelData) => {
      ListItem() {
        Column() {
          Row() {
            Text(item.name).fontSize(20).fontWeight(FontWeight.Bold).fontColor(Color.Black)
            Text(item.salary).fontSize(16).fontWeight(FontWeight.Bold).fontColor(Color.Blue)
          }.width("100%")
          .justifyContent(FlexAlign.SpaceBetween)
          Text(item.cname)
            .fontSize(14)
            .fontColor(Color.Gray)
            .width("100%")

          Row() {
            Text("经验不限")
              .newExtend()

            Text("本科")
              .newExtend()

            Text("计算机专业")
              .newExtend()
          }.width("100%")

          Row() {
            Image($r('app.media.app_icon'))
              .height(20)
              .width(20)
              .borderRadius(10)
              .objectFit(ImageFit.Contain)
            Text(item.username)
              .fontSize(14)
              .width("100%")
              .fontColor(Color.Blue)
          }
        }
        .padding(10)
        .width("100%")
        .backgroundColor(Color.White)
        .borderRadius(10)
      }
    })
  }.width("100%")
  .backgroundColor("#eeeeee")
  .divider({ strokeWidth: 1, color: 0x222222 })
  .edgeEffect(EdgeEffect.None)
}
  • 定义了一个 getListView 方法，用于构建职位列表的UI。
  • 使用 List 和 ForEach 组件，遍历 dataList，为每个职位生成一个列表项。
  • 每个列表项包含职位名称、薪资、公司名称、职位要求和发布人信息。

5. 扩展样式方法

@Extend(Text)
function newExtend() {
  .padding(5)
  .fontSize(10)
  .fontColor("#333")
  .backgroundColor("#eeeeee")
}
  • 定义了一个扩展样式方法 newExtend，用于设置文本的外边距、字体大小、颜色和背景颜色。

5. PositionListModel：提供类型安全和结构化的数据处理方式

export class PositionListModel {
  msg?: string = "";
  code?: number = 0;
  data: Array<PositionListModelData> = [];
}
export class PositionListModelData {
  id?: number = 0;
  name?: string = "";
  cname?: string = "";
  size?: string = "";
  salary?: string = "";
  username?: string = "";
  title?: string = "";
}

7. 图片展示

Snipaste_2025-01-27_15-18-17.jpg

Snipaste_2025-01-27_15-18-38.jpg

总结

通过上述代码，我们实现了一个完整的职位列表页面，包括职位搜索、列表展示、下拉刷新和上拉加载更多功能。用户可以通过搜索框输入关键词搜索职位，通过下拉刷新和上拉加载更多操作，动态更新职位列表数据。

avatar
文章
阅读
粉丝