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

🌟 使用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 = []; @State JokeList: Array = []; @State dataList: Array = []; @State curPage: number = 1; @State pageSize: number = 7; @State curnumber: number = 1; @State data: Array = 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() { .fontSize(20).fontWeight(FontWeight.Bold).fontColor(Color.Black) .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 { string = ""; number = 0; data: Array = []; } export class PositionListModelData { number = 0; string = ""; string = ""; string = ""; string = ""; string = ""; string = ""; }

总结

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