kitking-h5-ui

v1.2.9

Published

3 years ago

[TOC]

Downloads

0High
0Medium
0Low

kayak-008

[TOC]

按需加载

1.下载 babel 插件

npm i babel-plugin-import

2.配置.babelrc 文件

{
    "plugins": [
        ...
        +[
        +    "import",
        +    [{ "libraryName": "antd-mobile", "style": true }, { "libraryName": "kitking-h5-ui", "style": true }]
        +]
    ]
}

依赖下载

npm i kitking-h5-ui

#组件

View

视图根组件，每一个视图都应该被View组件包裹

```js
<View>
    ...
</View>
```

Header

页面头部
组件属性说明

| 属性名 | 说明 | 类型 | 默认值 | | ------ | --------------------------------------------- | ------ | ------ | | title | 可修改页面document.title 属性，兼容微信浏览器 | string | null |

Content

页面内容应该被Content组件包裹,组件包含Scroll组件

| 属性名 | 说明 | 类型 | 默认值 | | --------- | ---------------- | ---- | ------ | | hasHeader | 是否有Header组件 | bool | true | | hasFooter | 是否有Footer组件 | bool | false |

其他属性参考[Scroll](#Scroll)

Footer

页面底部组件，结合TabBar一起使用

Scroll

页面滚动组件，可上拉刷新、下拉加载。组件以better-scroll基础开发

| 属性名 | 说明 | 类型 | 默认值 | | ---------------------- | -------------------------------------------------------------------------------------------------- | ------------------------- | -------------- | | pullDownRefresh | 下拉刷新组件，方法返回Promise。 | () => <Promise | void> | null | | pullUpLoad | 上拉加载组件，方法返回Promise。Promise resolve 值为true时，则表示还有更多数据，false表示无数据加载 | () => <Promise | void> | null | | loading | 加载中时展示的组件 | node | <Spinner /> | | className | 扩展样式 | string | null | | noMore | 上拉加载没有更多数据（Promise 为false）显示的文字 | string | '没有更多数据' | | more | 上拉加载之前文字 | string | '' | | pullDownRefreshLoading | 下拉加载loading状态，当pullDownRefresh 返回值void 生效 | bool | - | | pullUpLoadLoading | 上拉加载loading状态，当pullUpLoad 返回值void生效 | bool | - | | hasMore | 上拉加载完成后是否还有数据状态，当pullUpLoad 返回值void生效 | bool | - |

更多属性参考[better-scroll](https://ustbhuangyi.github.io/better-scroll/#/)

TabBar

底部导航组件，对ant-mobile TabBar组件修改，组件属性不变。

属性参考(https://mobile.ant.design/components/tab-bar-cn/)

Form

表单验证组件。

Form.create(option: Object) => (WrappedComponent: React.Component) => React.Component

用法参考rc-form

Form.createItem(config: Objectkey:Object) => Objectkey:React.Component

通过配置，生成表单组件。 config参数说明如下 | 属性名 | 说明 | 类型 | 默认值 | | -------------- | -------------- | ------------------ | ------ | | component | 表单组件 | React.Component | - | | name | 表单组件name值 | stirng | '' | | initialValue | 表单组件初始值 | any | '' | | componentProps | 组件属性 | Object | - | | rules | 验证规则 | Object[] | - |

Form.formShape 用于设置组件的propTypes form值

更多组件请参考Ant Design Mobile of React

fixModal

修复modal滚动穿透 https://github.com/ant-design/ant-design-mobile/issues/1947 使用方法：

第一步：import { common } from 'kitking-h5-ui';
第二步：showModal = (key) => (e) => {
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState(
            {
                'modal': true
            },
            () => common.fixModal() //修复IOS页面内容滚动问题
        );
    };
第三步：<Modal
            visible={this.state.modal}
            transparent
            maskClosable={false}
            onClose={this.onClose('modal1')}
            title="Title"
            <div style={{ height: 100, overflow: 'scroll' }} className="scroller"> //可滚动部分需要添加scroller样式
                scoll content...
                <br />
                scoll content...
                <br />
                scoll content...
                <br />
                scoll content...
                <br />
                scoll content...
                <br />
                scoll content...
                <br />
            </div>
        </Modal>

ProgressiveImage

渐进加载图片，用于图片预加载

| 属性名 | 说明 | 类型 | 默认值 | 是否必传 | | ----------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------- | ---------------------------------------- | -------- | | delay | 延时显示时间 | number | - | O | | onError | 图片加载错误回调 | (errorEvent: Event) => void | - | O | | placeholder | 加载高清图片前，需要展示的图片可为字符串或者图片地址字符串 | string | - | O | | src | 图片地址 | string | - | M | | srcSetData | 响应式加载图片参考 | {srcSet, sizes} | - | O | | children | 自定义子组件 | children: (string, boolean, srcSetData) => React.Node | (string, boolean, srcSetData) => <img> | O | | className | 默认img样式 | string | - | O | | style | 默认img style 样式 | CSSProperties | - | O | | alt | 默认img alt 属性 | sting | - | O |

//基础用法
import { ProgressiveImage } from 'kitking-h5-ui';
import min_bg from '../../resource/img/min_bg.png'; //压缩后的图片
import bg from '../../resource/img/bg.png';
import bg2 from '../../resource/img/[email protected]';
import bg3 from '../../resource/img/[email protected]';
<ProgressiveImage src={bg3} placeholder={min_bg} style={{ width: '10rem', height: '10rem' }} alt="an image" />

//使用loading参数
<ProgressiveImage src={bg3} placeholder={min_bg}>
  {(src, loading) => (
    <img style={{ opacity: loading ? 0.5 : 1 }} src={src} alt="an image" />
  )}
</ProgressiveImage>

//使用srcSetData 做响应适配
<ProgressiveImage 
    src={bg} 
    placeholder={img_gift} 
    srcSetData={{
        srcSet: `${bg} 320w, ${bg2} 700w, ${bg3} 2000w`, //属性使用方法参考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
        sizes: '(max-width: 2000px) 100vw, 100%' //属性使用方法参考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
    }} 
    style={{ width: '10rem', height: '10rem' }} alt="an image" />

更新日志：

| 时间 | 类型 | 修改人 | 版本号 | 修改内容 | | ---------- | ---- | ------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | 2018-11-12 | M | fusy | 1.0.1 | 增加fixModal方法，修复ant-mobile弹框组件，在IOS设备上页面可滚动问题 https://github.com/ant-design/ant-design-mobile/issues/1947 | | 2018-11-14 | M | fusy | 1.0.3 | 修复fixModal Android 设备滚动穿透问题 | | 2018-11-15 | M | fusy | 1.1.0 | 扩展Scroll上拉加载、下来加载完成方式，新增可通过props.pullDownRefreshLoading、props.pullUpLoadLoading、props.hasMore 来处理完成状态；content嵌套Scroll优化。 | | 2018-11-15 | M | fusy | 1.1.0 | 添加Header props.title 属性。可通过header title属性更改document.title 兼容微信浏览器 | | 2018-11-15 | A | fusy | 1.1.0 | 新增ProgressiveImage组件，渐进加载图片组件 | | 2018-11-16 | M | fusy | 1.1.1 | 处理Scroll支持lazyload组件 |

build:打包 feat: 改动 fix：修复 revert：重构