@baic/yolk-miniapp-ui

taro-ui的扩展，主要是配合yolk-miniapp的Form来使用，并集成一些常用场景的组件

使用

yarn add @baic/yolk-miniapp-ui

API

Provider

yolk-miniapp-ui的初始化上下文

参数	说明	类型	默认值
inputMaxLength	输入组件的默认长度限制	number	-
preloadLoadingContent	预加载组件的默认加载文字	string	-
autoPlaceholder	输入组件是否自动生成placeholder	boolean	-

usePreload(loader, option)

用于页面预加载loading效果

参数	说明	类型	默认值
loadingContent	加载文字	string	加载中
auto	是否自动关闭加载, false自主控制	boolean	true

import * as React from 'react';
import { View } from '@tarojs/components';
import { Util } from '@baic/yolk-miniapp';
import { usePreload } from '@baic/yolk-miniapp-ui';
export default () => {
  const [wrap] = usePreload<{
    a: number;
  }>(async () => {
    await Util.delay(1000);
  });
  return wrap(<View/>)
}

Input

AtInput的缩减版，克服AtInput与Form结合的真机延迟问题

NumberInput

Input扩展，提供数字输入支持

参数	说明	类型	默认值
precision	小数位数	number	-
zeroStart	是否允许0开头	boolean	-
negative	是否可为负数	boolean	-
ignorePointLength	是否maxLength忽略小数点长度	boolean	true

MobileInput

NumberInput扩展，提供电话号码输入支持

MoneyInput

NumberInput扩展，提供金额输入支持，默认两位小数位数，并默认maxLength不计算小数点长度

Textarea

AtTextarea扩展

NavBar

AtNavBar扩展

参数	说明	类型	默认值
fixed	是否固定顶部	boolean	true
transparent	是否透明	boolean	-
outStatusBarHeight	是否排除状态栏高度	boolean	true

TimerButton

AtButton扩展

参数	说明	类型	默认值
onBeforeClick	触发点击事件前的事件	function	-
time	默认的倒计时	number	60
formatter	倒计时格式化	function	(time: number) => ${time}s后重试
strict	严格模式，刷新延续倒计时	boolean	-

TimerButton.useTimer(option: Option): [value, disabled, trigger]

倒计时hooks，自定义倒计时组件使用

参数	说明	类型	默认值
defaultTime	默认的倒计时	number	60
defaultValue	默认的children	ReactNode	-
strict	严格模式，刷新延续倒计时	boolean	-
formatter	倒计时格式化	function	(time: number) => ${time}s后重试

List

用于数据列表展示，特别适用于庞大数据列表

参数	说明	类型	默认值
className	类名	string	-
itemClassName	单项类名	string	-
itemSize	单项尺寸	number	-
maxItemSize	最大单项尺寸	number	-
layout	列表方向	vertical | horizontal	vertical
height	高度，vertical方向必填	number or string	-
width	高度，horizontal方向必填	number or string	-
dataSource	数据组	T[]	-
pageSize	规定height或width以内显示条数	number	-
render	项的渲染方式	function	(data: T, index: number) => null
forwardRef	列表实例	ListInstance	-

List.ListInstance

List的ref实例

ListInstance.scrollTo(scrollOffset: number): void;
ListInstance.scrollToItem(
  index,
  align: 'auto' | 'smart' | 'center' | 'end' | 'start',
): void;

PagingList

用于分页查询数据列表，List的扩展

参数	说明	类型	默认值
className	类名	string	-
forwardRef	列表实例	PagingListInstance	-
autoStart	是否自动开始	boolean	true
defaultPageSize	每页长度	number	10
defaultPage	起始页	number	1
source	数据来源，每次查询分页调用	function	(page: number, size: number) => ({list:[], total: 0})
mode	分页模式	bottoming | button	bottoming
loadMore	mode为button启用，分页按钮参数	AtLoadMoreProps or function	1
enablePullDownRefresh	是否开启下拉刷新	boolean	true
height	高度，vertical方向必填	number or string or function	-
emptyContent	空状态节点	ReactNode	-

PagingList.PagingListInstance

PagingList的ref实例

PagingListInstance.refresh(page?: number): Promise<PagingData<T>>;
PagingListInstance.reset(page?: number): Promise<PagingData<T>>;
PagingListInstance.next(): Promise<PagingData<T>>;
PagingListInstance.startPullDownRefresh(): void;
PagingListInstance.stopPullDownRefresh(): void;
PagingListInstance.triggerPullDownRefresh(): void;
PagingListInstance.getList(): T[];

Hooks

一些hooks工具

Rect

包含width,height的矩阵对象

Hooks.useRect(selector: string, auto?: boolean): [Rect, () => Promise];

获取节点矩阵

Hooks.useViewportRect(excludeRectSelectors: string[], auto?: boolean): [Rect, () => Promise];

获取节点视图矩阵，根据屏幕高度宽度和排除的节点计算得出