mobile组件开发有哪些不一样的
来源:互联网 发布:淘宝文案兼职工资多少 编辑:程序博客网 时间:2024/04/29 20:59
共同点:
1 组件实现功能一致,对外暴露接口一致
不同点:
1 考虑的浏览器兼容性不一样
2 对html5 和 css3 支持不一样
3 性能要求不一样。手机上,cpu 、内存性能同pc还有很大差距,这样在手机上要更关注性能一些
4 手机屏幕丰富多彩,这样就要求组件构建的时候,考虑到responsive design
5 可以实现的动画效果不一样
鉴于手机端和pc端要实现的功能一样,我们采用了pc端widget的框架。一方面是widget框架,不依赖jquery,非常独立适用,另一方面是尽量保持平台的一致性,减少迁移和学习成本。
因为手机端需要兼容的浏览器都比较高级,我们可以使用高级的属性来实现相同的功能
比如:手机端,dialog 组件
html 基本框架
<section class="dialog_mask"> <div class="dialog_body"> </div></section><style>.dialog_mask{ position: absolute;}.dialog_body{ position:relative;}</style>
position:relative;这样的好处是dialog_body 可以通过margin: 0 auto;实现居中,不用js算。
1 如何实现蒙版效果?
通过background:rgba(0,0,0,0.75);
opacity 由于其继承性,子节点都会继承透明性,即使在子节点设置opacity=1;故如果用opacity,就需要把dialog_body 和dialog_mask 分开。然后用定位方法将他们重叠。
而background:rgba 只针对当前节点,不具备继承性。这样,dialog_mask 和 dialog_body 就可以放在一起了。
2 如果不需要蒙版,改怎么办?
dialog_mask{width:0;height:0;overflow:visible}
对比pc端的实现,手机端不需要iframe来遮挡select等控件;mask 和 dialog 都在一个结构里面,更完整,更稳定。
性能
手机端拥有高级的浏览器,但是cpu 和内存性能却跟pc差距大,在性能方面,我们需要着重考虑
因为transition 是浏览器级别的动作,比js更高效,同时如果开通硬件加速,动画效果更流畅。
例如在slide demo 组件中,
卡片的移动,通过transition 来实现动画效果
通过transform:translate3d(x,x,x)启动硬件加速和属性的改变。
动画:
css3加入了强大的动画,这样丰富了组件的表现能力
诸如:fade、flip 、turn 、flow、 slidefade 、slide 、slideup 、slidedown 等样式,都可以通过css来表示
例如:
flip效果:
.turn.out {transform: rotateY(-90deg) scale(.9);animation-name: flipouttoleft;animation-duration: 125ms;}@keyframes flipouttoleft { from { transform: rotateY(0); } to { transform: rotateY(-90deg) scale(.9); }}这就是flip的一个旋转效果。以后会加入到dialog组件中。参考;http://api.jquerymobile.com/dialog/
- mobile组件开发有哪些不一样的
- android游戏开发中常用组件有哪些
- 【前端】Node.js 9.0来了_有哪些不一样的体验?
- 华为硬件开发是怎么做的,有什么不一样?
- 常用的网页开发工具有哪些
- 手机APP开发的盈利模式有哪些
- 常用的android开发框架有哪些
- 常用的android开发框架有哪些
- 世界上有哪些优秀的grid组件??(征集ing...)
- Yii框架预定义的组件有哪些?
- 微信小程序中有哪些你需要的实用组件
- 通达OA2017与2016版本有哪些不一样的地方,转载麦枫论坛收集整理内容
- Web组件与Web容器有哪些,WEB组件的三种关联关系
- Struts框架组件都有哪些?
- 组件方式开发 情人节表白App,给你情人不一样的惊喜!
- 2017有哪些推荐的Unity3D开发的基础教程
- phthon有哪些开发工具?
- 数据仓库开发难点有哪些?
- Linux下OpenSSL 安装图文详解
- Linux 程序中获取网关
- jbpm
- 《生活在Linux中》之:在Vim中使用Emacs
- 30分钟了解C++11新特性
- mobile组件开发有哪些不一样的
- SGU 112. a^b-b^a 高精度
- ubuntu ifconfig添加新网段
- C#——泛型集合
- 怎么让Edittext 默认不自动获取焦点
- VS2008英文版 控件的中文命名变成问号的解决方法
- 手游产品经理初探(二)从营销角度看loading界面
- CodeMeter:软件加密的“木桶定律”
- linux 下安装mysql