kitking-mobile-ui v1.3.1

/*

• @description:
• @Author: fusy
• @Date: 2019-01-22 16:30:29

• ---

• @Modified By: fusy
• @Last Modified: 2019-01-22 16:30:29
• HISTORY:
• Date By Comments
• ------ --- --------------------------------------------------------- */

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

页面头部
组件属性说明

Content

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

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

Footer

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

Scroll

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

更多属性参考[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: Object<key:Object>) => Object<key: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

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

//基础用法
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/bg@2x.png';
import bg3 from '../../resource/img/bg@3x.png';
<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" />

更新日志：

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