黑马程序员技术交流社区
标题: 【黑马程序员济南】前端与移动开发就业班笔记移动web:day03 [打印本页]
作者: 小鲁哥哥 时间: 2018-1-5 13:39
标题: 【黑马程序员济南】前端与移动开发就业班笔记移动web:day03
【黑马程序员济南】前端与移动开发就业班笔记移动web:day03
移动端的滑动效果在移动端特有的事件touch中，
包含了 touchstart，touchmove，touchend三个事件，
首先：
我们可以通过touchstart事件中返回的event对象中的第一个触摸点信息中的client坐标，
然后：
我们再通过监听touchmove事件的时候获取到滑动的时候的触摸点，在互获取event对象中返回的client坐标，这样就可以计算滑动的时候改变的距离。
同时改变当前元素的translate就可以。
最后：
在touchend的时候利用记录下当前元素的定位。
注意的是：在移动端是利用transform来做定位。
滑动的时候改变距离的方向问题。
过渡结束事件
[JavaScript] 纯文本查看 复制代码
/**
*@author 传智播客
*/
dom.addEventListener('webkitTransitionEnd',function(e){ });
dom.addEventListener('transitionEnd',function(e){ });
在这里要注意的是：为了兼容浏览器在绑定事件的时候需要同时绑定一个带webkit前缀的事件和不带的这样达到兼容主流浏览器。
还有：给目标元素绑定事件后，每一次过渡结束都会触发transitionEnd事件。
使用过渡和改变注意问题在移动端为了兼容老版本的一些webkit浏览时在css中或者js中一定要做兼容处理。
Css中的处理方法是加上-webkit-前缀和一个不加的。
Js中处理方法是style设置的时候需要设置一个webkit前缀的属性和一个不加的。
两栏其中一栏宽度自适应我们首先知道文本环绕的的概念：
那么当文本在另一个容器当中，容器是overflow：hidden的时候。那么这个时候这个盒子就变成了一个绝缘的盒子，不去影响任何外部的元素并且内容使用剩余的宽度。
这样也可是做一个自适应的两栏布局方式。
按钮问题
这里的按钮设置的是 40*44的大小 但是内容只有20px为什么要这么设置呢？在移动端如果按钮太小触发起来相对来说比较困难，用户体验非常不好。那么在设置按钮的时候需要设置的更大一点。
注意不能使用margin，应为a标签触发不了。
移动端事件原理在移动端通常 tap swipe 等事件的封装原理
Tap：
由于在移动端click会有300ms左右的延时，为了响应速度更快移动端框架一般会封装一个加tap的事件，原理：利用touch事件当没有滑动过并且响应时间在一定的时间内（比click快）那么这样的一个过程就是一个tap事件。
Swipe：
在移动端有手势事件，也是一些移动端框架封装出来的那么这种事件也是touch事件开始的位置和结束的位置来判断手势的情况。是向下滑还是向右滑，是向下滑还是向上滑。
1.2 知识内容1.2.1 购物车页面切图购物车页面是一个移动端最常使用的布局方式，完全的试用通栏流式布局的方式，宽度自适应。
这个页面需要注意的地方。
怎么自定义checkbox:
移动端弹出框的特点:
推荐网站
这个网站可以提供一些常用的动画，可以在做移动开发的时候可以参考这个网站的效果完成动画。
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。
微信UI库，它是微信前端团队提供给广大的微信开发者的一些ui组件库。方便开发这开发出和微信风格一致的内嵌应用。
项目三种布局分析
首页的适用场景：门户电商的首页 而且内容比较丰富
分类页面的使用场景：单页面 全屏的布局当中会使用异步的交互ajax，web app 的开发模式当中会使用到Web app 网页程序 网页应用
移动web页面优点： 跨平台 android ios，
Hybird app 现在流行起来的 混合应用 开发模式，套用嵌入移动web页面的应用所有的移动页面都可以
Native app 原生应用
购物车页面：任何地方都可以用到这样的布局。
如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！
黑马程序员济南中心联系电话：0531-55696830
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |