wtr

简介

基本快捷方法、下拉刷新、上拉加载，可自定义刷新加载风格(refresh)；加载弹框、消息弹框、成功提示、失败提示；JSON转对应模型；

• WTRRefresh 下拉刷新、上拉加载，支持自定义
• WTRHUD 加载弹框、消息弹框
• wtrhttp 系统http简单封装

安装：

ohpm install wtr

引用方式：

import { WTRHUD } from 'wtr'
import { WTRRefresh, WTRRefreshController } from 'wtr'

HUD使用方法：

WTRHUD.showInfo("信息提示")
WTRHUD.showLoading()
WTRHUD.showSuccess("操作成功")
WTRHUD.showError("网络错误")

WTRHUD.hide()

//另一种方式：
WTRHUD.showInfo({
    msg: "信息提示",
    alignment: DialogAlignment.Bottom
})

下拉刷新，上拉加载使用方法：

import {
  WTRRefresh,
  WTRRefreshController,
  WTRRefreshControllerOptions,
  WTRRefreshState,
  WTRRefreshBuilderParam,
  WTR
} from 'wtr'

@Entry
@Component
struct RefreshPage {
  @State arr: Array<number> = []

  aboutToAppear() {
    for (let i = 0; i < 20; i++) {
      this.arr.push(i)
    }
  }

  onPageShow() {
    setTimeout(() => {
      this.refreshController.beginRefresh()
    }, 500)
  }

  refreshController: WTRRefreshController = new WTRRefreshController({

    contentEndOffset: WTR.safeBottom(), //需要和List的contentEndOffset一样

    onRefresh: () => {
      console.log("开始刷新")
      setTimeout(() => {
        this.arr.reverse()
        this.refreshController.endRefresh()
      }, 1000)
    },
    onLoad: () => {
      console.log("开始加载")
      setTimeout(() => {
        for (let i = 0; i < 5; i++) {
          this.arr.push(Math.round((Math.random() * 100) % 100))
        }
        //noMoreData 是否显示已加载全部  dataAdded数据是否已加载更多，如果没有数据增加，内容高度不变，dataAdded需要设置成false
        this.refreshController.endLoad(false, true)
      }, 1000)
    }
  })

  //内容
  @Builder
  contentBuilder(scroller: Scroller) {
    List({ scroller: scroller }) {
      ForEach(this.arr, (item: number) => {
        ListItem() {
          Text("哈哈哈哈:" + item)
            .height(50)
        }
        .width("100%")
        .backgroundColor(item % 2 == 0 ? Color.Orange : WTR.randomColor())
        .onClick(() => {
          console.log("点击cell:", item)
        })
      })
    }
    .width("100%")
    .height("100%")
    .contentEndOffset(WTR.safeBottom()) //需要和WTRRefreshController内的一样
  }

  build() {
    Column() {
      Row() {
        Text("标题")
          .height(60)
      }
      .padding({ top: WTR.safeTop() })

      WTRRefresh({
        controller: this.refreshController,
        contentBuilder: (scroller: Scroller) => {
          this.contentBuilder(scroller)
        },

        // 自定义刷新加载显示
        // customHeaderBuilder:($$:WTRRefreshBuilderParam)=>{
        //
        // },
        // customFooterBuilder:($$:WTRRefreshBuilderParam)=>{
        //
        // }
      })
      .layoutWeight(1)
       //.margin({ bottom: 60 + WTR.safeTop() }) //顶部标题高度多少这里就设置多少或者用layoutWeight(1)
    }
    .width("100%")
    .height("100%")
  }
}

wtrhttp使用方法：

import { wtrhttp } from 'wtr'

wtrhttp.GET("https://example.com", (err: Error, result: string) => {
  console.log("result:",result)
});

WTR.JSONParse使用方法：

import { WTR, JSONType } from 'wtr'

class B {
  p?: number
  test() {
    console.log("test()")
  }
}
class A {
  @JSONType(B)
  b?: B
  @JSONType(B)
  list?: B[]
}

let jsonStr =
`{
  "b" : {
    "p" : 1
  },
  "list" : [
    {
      "p" : 2
    },
    {
      "p" : 3
    }
  ]
}`
    let a: A = WTR.JSONParse(jsonStr, A);
    console.log("a:", JSON.stringify(a))
    a.b?.test()

仓库地址