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

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';
1.
2.
3.
4.
5.

@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
        });
      }
    });
  }
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.

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%")
}
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.

@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)
}
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.

@Extend(Text)
function newExtend() {
.padding(5)
.fontSize(10)
.fontColor("#333")
.backgroundColor("#eeeeee")
}
1.
2.
3.
4.
5.
6.
7.

export class PositionListModel {
string = "";
number = 0;
  data: Array<PositionListModelData> = [];
}
export class PositionListModelData {
number = 0;
string = "";
string = "";
string = "";
string = "";
string = "";
string = "";
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.