@baic/yolk-miniapp-ui
v1.0.19
Published
## 使用
Downloads
88
Readme
@baic/yolk-miniapp-ui
taro-ui的扩展，主要是配合yolk-miniapp的Form来使用，并集成一些常用场景的组件
使用
yarn add @baic/yolk-miniapp-uiAPI
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 | 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[];