简介
鸿蒙基本库封装,提升鸿蒙开发效率
安装
ohpm install @peakmain/library
使用
一、Dialog 弹出框

导入依赖
import { DialogComponent } from '@peakmain/library/Index';
1. 默认弹窗
基本布局
title: string = '确认删除订单';
message: string = '删除后将无法恢复,无法再次操作。';
leftText: string = '取消';
rightTextColor: ResourceColor = $r("app.color.color_194d53")//右边文本颜色,#194d53为默认文本颜色
rightTextBold: boolean = true//右边文本是否加粗,默认是加粗
confirm: CustomDialogController = new CustomDialogController({
builder: DialogComponent({
title: this.title,
message: this.message,
leftText: this.leftText,
rightTextColor: this.rightTextColor,
rightTextBold: this.rightTextBold,
rightTextClick: () => {
promptAction.showToast({
message: `点击了${this.title}`,
})
this.confirm.close()
this.resetDefault()
}
}),
customStyle: true,
alignment: DialogAlignment.Center,
})
显示弹窗
this.confirm.open()
2.提示弹窗
this.title = "提示"
this.leftText = ""
this.rightTextColor = $r("app.color.color_1989fa")
this.confirm.open()
3.弹窗(无标题)
this.title = ""
this.confirm.open()
二、Loading加载

导入依赖
import { PkLoading } from '@peakmain/library/Index';
1. 默认Loading
基本布局绘制
title: string = "加载中..."
isVertical: boolean = true//默认是垂直方向
loadingColor: ResourceColor = Color.White//默认加载progress颜色为白色
textColor: ResourceColor = Color.White//默认文本颜色为白色
backgroundResourceColor: ResourceColor = "rgba(0,0,0,0.46)"//默认背景颜色rgba(0,0,0,0.46)
loading: CustomDialogController = new CustomDialogController({
builder: PkLoading({
title: this.title,
isVertical: this.isVertical,
loadingColor:this.loadingColor,
textColor:this.textColor,
backgroundResourceColor:this.backgroundResourceColor
}),
customStyle: true,
isModal: false,//是否有蒙层,false表示没有蒙层,true表示有蒙层
autoCancel: true,
cancel: () => { //监听取消事件
this.resetData()
}
})
开启loading
this.loading.open()
2. 自定义加载文案
this.title = "数据加载中..."
this.loading.open()
3. 水平方向
this.isVertical = false
this.loading.open()
4. 自定义颜色(背景颜色、文本颜色、加载颜色)
this.loadingColor=Color.Pink
this.textColor=Color.Pink
this.backgroundResourceColor=Color.Blue
this.loading.open()
三、List列表

导入依赖
import { PkList } from '@peakmain/library/Index'
1. 基本使用
//数据源
@State arr: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
@State
page: number = 1 // 第几页
pageSize: number = 2 //共几页
PkList({
dataSource: this.arr,//数据源
finished: this.page >= this.pageSize,//是否已完成,分页加载
renderItem: (item) => {
this.renderItem(item)//每一条item布局
},
}).margin({
bottom: 20
})
@Builder
renderItem(item: object) {
Column() {
Text('' + item)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(Color.White)
}.margin({
bottom: 10,
left: 10, right: 10
})
.border({
width: 0.5,
color: Color.Red
})
.borderRadius(20)
}
2. 加载更多:调用onLoad方法即可
PkList({
dataSource: this.arr,//数据源
finished: this.page >= this.pageSize,//是否已完成,分页加载
renderItem: (item) => {
this.renderItem(item)
},
onLoad: async () => {
await this.getNewData(false)
}
}).margin({
bottom: 20
})
async getNewData(isRefresh: boolean) {
console.log("执行了getNewData..." + isRefresh)
const tmp = await this.getData(isRefresh)
if (isRefresh) {
this.arr = tmp
} else {
this.arr.push(...tmp)
}
}
getData(isRefresh: boolean) {
console.log("执行了getData..." + isRefresh)
return new Promise((resolve) => {
let tmp: String[]
setTimeout(() => {
if (!isRefresh) {
this.page++
tmp = ['new_0', 'new_1', 'new_2', 'new_3', 'new_4', 'new_5']
} else {
this.page = 1
tmp = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
}
console.log("当前页数:" + this.page)
resolve(tmp); // 执行完成后调用 resolve
}, 2000);
});
}
3. 下拉刷新:onRefresh方法即可
PkList({
dataSource: this.arr,//数据源
finished: this.page >= this.pageSize,//是否已完成,分页加载
onRefresh: async () => {//下拉刷新
await this.getNewData(true)
},
renderItem: (item) => {
this.renderItem(item)
},
onLoad: async () => {//加载更多
await this.getNewData(false)
}
}).margin({
bottom: 20
})
阅读全文
下载说明:
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.1024c.cn/archives/20612,转载请注明出处。
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.1024c.cn/archives/20612,转载请注明出处。
评论0