antd
飞天代码
这个作者很懒,什么都没留下…
展开
-
antd mobile(五)react-router界面切换动画
用antd mobile时就在纳闷怎么没有提供界面切换动画,还为之苦恼了半天,后来才发现界面切换的动画是由react router提供了,赶紧的试试吧。第一步: 是安装ReactCSSTransitionGroup。 React为动画提供了一个附加组件ReactTransitionGroup,这个附加组件是动画的底层API,并且还提供了一个附件组件ReactCSSTransitionGroup,原创 2017-08-16 14:47:09 · 7586 阅读 · 3 评论 -
antd mobile(十二) dva中使用mockJs
一开始做没有用mockJs来模拟数据查询,都是写在state里面,但后来发现还是存在偏差,所以还是把mockJs集成到系统中。 现在为界面写个模拟数据请求的mockJs文件 第一步:在mock文件下添加WorkReportMc.js,文件内容大概如下:'use strict';const qs = require('qs');const mockjs = require('mockjs');原创 2017-09-17 13:39:30 · 1294 阅读 · 2 评论 -
antd mobile(八) webpack通过别名取代路径引用
开发了好几个界面了,发现路径引用非常麻烦,而且非常的长。比如下面的代码://自己封装的js组件import { GoingNav,GoingScroll } from './../../../components/goingMobile';//自己封装的工具类jsimport {DateFun} from '../../../utils/goingUtils';有一次温习webpack的时候,原创 2017-08-31 09:51:27 · 1607 阅读 · 0 评论 -
antd mobile(十一) MeScroll集成到项目中
MeScroll是在一个论坛看到的,论坛说比iscroll5 强大多了,本人对iscroll5早就不爽了,所以豪不犹豫的决定换掉它。 经过一天的奋斗,发现MeScroll确实比iscroll5要强大些,也好理解些,所以如果还在犹豫从这俩者之间选择谁,那我就推荐MeScroll了。虽然推荐MeScroll 但并不代表MeScroll就没有坑,还是那句话遍地都是坑。因为MeScroll是基于以前的aj原创 2017-09-07 13:52:52 · 4762 阅读 · 1 评论 -
antd mobile(十) 性能优化PureRender的使用
不得不吐槽react,确实不是新手玩的东西,一句话就是水深坑多啊。如果是前台新手我还是不建议直接使用这种框架开发。搜索react的性能优化,都提到了用pureRender来优化其性能,其实就是减少虚拟dom跟实际dom的diff的计算。但在dva这种架子下面,根本没法使用pureRender来进行性能优化,因为返回的永远是true,根本就做不到减少渲染的效果。分析下了pureRender源代码,将p原创 2017-09-03 01:23:06 · 993 阅读 · 0 评论 -
antd mobile(四) highcharts集成---采用react-highcharts
采用react-highcharts来集成highcharts,效果图: 第一步:安装react-highchartscnpm i --save-dev react-highcharts第二步:在文件头部引入相应的组件:var ReactHighcharts = require('react-highcharts');第三步:在需要添加图表的地方添加标签:<ReactHighcharts conf原创 2017-08-13 23:48:50 · 3907 阅读 · 0 评论 -
antd mobile (三) 集成highcharts--传统方式
highcharts是一套比较出名的图标组件,做了个集成展示,效果图: 第一步是安装highcharts组件cnpm i --save-dev highcharts第二步就是引入该组件:var Highcharts = require('highcharts');第三步:则就是在界面定义一个容器div,并为div设置相应的id <div className={styles.charDiv} id=原创 2017-08-13 23:38:28 · 1214 阅读 · 0 评论 -
antd mobile(二)高清方案配置
昨天把环境跑起来了,在chrome上正常,在safair上竟然就展示了50%。一猜就知道是mate的viewport设置问题。 又是几个小时的找资料配置才搞定,都是坑啊。 昨天搭建环境时字体过大,网上的方案是<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-s原创 2017-08-13 10:02:21 · 9121 阅读 · 0 评论 -
antd mobile(一) 环境搭建
以前需要一个组件,大概就3步,下载、引入、测试。 现在用个组件可能就是n步了,一个下午都没把antd mobile的组件展示出来,各种坑啊,看着官方文档一步一步也还是满地坑。 吐槽就免了,还是记录下来吧: 第一步:采用dva创建项目,这个如果不会看我前面写的文章。dva new goingMobile1创建完后,文件结构如下: 第二步:配置antd mobile的按需加载脚本和样式原创 2017-08-11 23:26:04 · 20276 阅读 · 6 评论 -
antd mobile(七) 固定NavBar
只能说antd mobile真的是为淘宝内部写的框架,竟然连固定NavBar显示的接口都没暴露出来。也就是NavBar不跟着屏幕滚动而滚动。说实话如果是用reactNative 开发当然不需要该接口,但问题是现在项目是做需要挂在微信端使用的,如果不固定NavBar基本是没法使用。第一步:其实固定NavBar非常简单,只要修改下css控制即可:.am-navbar{ display: -webk原创 2017-08-17 22:03:17 · 7268 阅读 · 0 评论 -
antd mobile(六)react-router 左进右出切换界面
第五节我们配置了页面路由切换,但发现个问题,所有界面都是向左切换的,感觉还是不对啊,仔细分析下原生app,会发现应该是进入是左切换,返回时应该是右切换出。第一步:修改路由动画配置信息: 修改前的代码: <ReactCSSTransitionGroup transitionName='left' component="div" transition原创 2017-08-16 23:41:52 · 3930 阅读 · 1 评论 -
antd mobile(九) iscroll5集成到项目中
刚开始做的时候没有采用iscroll,都做了快5个界面后才发现始终感觉界面差那么点意思,后来给用户演示时,发现界面跳转后回到当前界面又需要重新滚动到相应位置。用户说这个位置不能记住嘛? 一开始感觉这个简单啊,不就是记住当前滚动位置,然后通过js将滚动条滚动到指定位置,做的时候发现坑了,手机端浏览器根本不支持简单的设置window.scrollTo(0,this.props.SinglePlanMd原创 2017-08-31 15:35:17 · 1210 阅读 · 0 评论