HarmonyOS基本UI封装——Dialog 弹出框、loading加载和List下拉刷新加载更多(四)

简介

鸿蒙基本库封装,提升鸿蒙开发效率

安装

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,转载请注明出处。
0

评论0

显示验证码
没有账号?注册  忘记密码?