回复
鸿蒙开发(六)：职位列表页面的实现 原创
小_铁
发布于 2025-2-23 11:12
浏览
0收藏
🌟 使用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() {
.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<PositionListModelData> = [];
}
export class PositionListModelData {
number = 0;
string = "";
string = "";
string = "";
string = "";
string = "";
string = "";
}7. 图片展示
总结
通过上述代码，我们实现了一个完整的职位列表页面，包括职位搜索、列表展示、下拉刷新和上拉加载更多功能。用户可以通过搜索框输入关键词搜索职位，通过下拉刷新和上拉加载更多操作，动态更新职位列表数据。
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
赞
收藏
回复
相关推荐
