Harmonyos Development (Part 6) : Implementation of the Job List Page

🌟 Developing a HarmonyOS application with ArkTS: Implementation of the job list page

The job list page is an important functional module for users to view job information. The following is a complete implementation of the job list page, including job search, list display, dropdown refresh and pull-up load more functions.

Code Analysis

Import the module
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';
Multiple modules have been imported to implement functions such as prompt boxes, HTTP requests, job models, dropdown refreshes, and log recording.

1. Define the job list component @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 content is "+ positionModel.data); let msg = positionModel.msg; if (positionModel.code == 200) { this.JokeList = positionModel.data; this.dataList.push(... this.JokeList); } else { prompt.showToast({ message: msg }); } }); }

A job list component named PositionList has been defined.

Multiple state variables are defined using the @State decorator to store search keywords, job list data, current page numbers, page sizes per page, etc.

The controller is defined for managing the search operation.

In the aboutToAppear lifecycle function, the getPositionList method is called to obtain the initial position list data.

The "search" method was defined for searching positions based on the keywords entered by the user.

The getPositionList method is defined to obtain the position list data based on the current page number and the size of each page.

1. Page layout

build() {
Column() {
Row() {
Text(" Position ")
.fontSize(14)
.textAlign(TextAlign.Start)
.margin({ left: 5 })
Search({value: this.changeValue, placeholder: "Please enter the search information ", controller: this.controller})
.searchButton(" Search ")
.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(' Refresh Successful ');
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%")
}

Use the Column and Row layout components to build the UI of the job list page.

It includes a search box where users can enter keywords for searching.

Use the PullToRefresh component to implement pull-down refreshing and pull-up loading for more functions.

In the onRefresh callback, reset the data list and obtain the initial data.

In the onLoadMore callback, load more data and update the data list.

1. List view construction method

@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%")

1. Picture display