kitking-h5-ui

[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/[e-mail]';
import bg3 from '../../resource/img/[e-mail]';
<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： 重构