diff --git a/.eslintrc.js b/.eslintrc.js old mode 100644 new mode 100755 diff --git a/.gitignore b/.gitignore old mode 100644 new mode 100755 diff --git a/.stylelintrc b/.stylelintrc old mode 100644 new mode 100755 diff --git a/README.md b/README.md old mode 100644 new mode 100755 index e15e224..63d752e --- a/README.md +++ b/README.md @@ -5,9 +5,10 @@ [eslint规则](http://git.jc/app-h5/docs/blob/master/frontend/.eslintrc.js) [stylelint规则](http://git.jc/app-h5/docs/blob/master/frontend/.stylelintrc) - [postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem) pxtorem 自定义样式(不包括内联样式)和组件样式的px转化成rem -- [react-addons-css-transition-group](https://www.npmjs.com/package/react-addons-css-transition-group) 主要是实现APP内的动画效果,动画css需自定义开发 - [Ant Design Mobile of React](https://mobile.ant.design/) Ant Design Mobile 的 React 实现WebApp开发 - [Icon 编辑工具](http://www.iconfont.cn/) 阿里的矢量图标管理,将图标上传到Iconfont平台,可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端自由调整与调用,而本项目是使用的Symbol模式。 +- [rc-upload 上传文件模块](https://github.com/react-component/upload) 将信息(网页、文字、图片、视频等)通过网页或者上传工具发布到远程服务器上的过程。 +当需要上传一个或一些文件时;当需要展现上传的进度时;图片上传可采用antd-Mobile自带的图片上传模块; ## 布局 1、设计稿标准尺寸:750*1334 @@ -18,28 +19,41 @@ 4、border的1px可以写成1Px,这样就不会被转化成rem了 +5、兼容各个主流机型,已适配iPhoneX + ## 路由 ### 路由书写简单规范 - 主要是以JSON数组格式进行配置,添加模块后只需要添加想要的路由配置即可 - 基于父组件的路由需要配置父组件的名称(parent)且为字符串类型,没有则设parent为null -- 路由配置文件入口:Contants/Router/index.js +- 路由配置文件入口:Contants/Router/routerConf.js Example: ```javascript const routes = [ + { + path: '/', + exact: true, + component: Home, + parent: null, + showMenu: true, + animated: false, + title: '找工作' + }, { path: urls.HOME, exact: true, component: Home, parent: null, showMenu: true, + animated: false, title: '找工作' }, { path: urls.TOBEDONE, exact: true, component: TobeDone, parent: null, + animated: false, showMenu: true, title: '待办' }, { @@ -48,12 +62,14 @@ const routes = [ component: PushOrder, parent: null, showMenu: true, + animated: true, title: '发布工单' }, { path: urls.MESSAGE, exact: true, component: Message, parent: null, + animated: false, showMenu: true, title: '消息' }, { @@ -61,16 +77,26 @@ const routes = [ exact: true, component: Mine, parent: null, + animated: false, showMenu: true, title: '我的' }, { - path: urls.LOGIN, + path: urls.MYWORKLIST, exact: true, - component: Login, - parent: null, + component: MyWorkList, + parent: 'Mine', + animated: true, showMenu: false, - title: '登录' - } + title: '我的工单' + }, { + path: urls.AUTHENTICATE, + exact: true, + component: Authenticate, + parent: true, + animated: true, + showMenu: true, + title: '资格认证' + }, ... ] ``` @@ -81,6 +107,7 @@ exact: 路由是否精确匹配 component: 路由对应的组件 parent:父组件 showMenu: 是否显示footer的菜单 +animated: 是否有动画(注意:批量设置主菜单的动画不在这里设置,也就是TabBar组件,需要手动写css动画给antdMobile的 am-tabs-pane-wrap 样式,可以单独设置菜单的动画,如发布工单模块,需要在layout.js和menu里面配置相应的路由路径) title: 标题 ``` ## Icon使用说明 @@ -119,8 +146,14 @@ rightIcon: 右侧Icon(可与rightTitle并存) rightTitle: 右侧标题(可与rightIcon并存) rightClick: 右侧区域的点击事件回调函数 noLine: 是否有下边线(默认true,有下边线) + +/* 搜索框相关 */ onSearch: 搜索回调 searchTitle: 搜索框默认提示文字 +cancelText: 搜索框定制“取消”按钮的文字 +onSearchFocus: 搜索框focus 事件的回调 +onSearchCancel: 搜索框点击取消按钮触发 (不再自动清除输入框的文字) +onSearchSubmit: 搜索框submit事件 (点击键盘的 enter) ``` ## APP底部菜单配置 - 基于antdMobile的tabBar,配置APP的footer部分菜单(路由、样式、名称) @@ -171,6 +204,97 @@ key: 每项菜单必须配的key icon: 默认时候的icon onIcon: 被选中状态时候的icon title: 菜单名称 +``` +## 上拉刷新组件RefreshList +Example +```javascript +// 引入方法 +import { RefreshList } from 'Components' +.... +async genData(status, value) { // 父页面数据接口 + const data = await api.getData() || {} + return data.data || [] // 返回值必须是Json数组 +} +render() { +const separator = (sectionID, rowID) => ( +
) +const row = (rowData, sectionID, rowID) => { + return (