【黑马程序员济南】前端与移动开发就业班笔记移动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:

移动端弹出框的特点:

推荐网站

动画网站：https://daneden.github.io/animate.css/

这个网站可以提供一些常用的动画，可以在做移动开发的时候可以参考这个网站的效果完成动画。

Zepto：http://zeptojs.com/

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。

Weiui：http://weui.github.io/weui/

微信UI库，它是微信前端团队提供给广大的微信开发者的一些ui组件库。方便开发这开发出和微信风格一致的内嵌应用。

项目三种布局分析

首页的适用场景：门户电商的首页   而且内容比较丰富  

分类页面的使用场景：单页面  全屏的布局当中会使用异步的交互ajax，web app 的开发模式当中会使用到Web app  网页程序 网页应用

移动web页面优点： 跨平台 android  ios，

Hybird app 现在流行起来的  混合应用  开发模式，套用嵌入移动web页面的应用所有的移动页面都可以

Native app 原生应用

购物车页面：任何地方都可以用到这样的布局。

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830

【黑马程序员济南】前端与移动开发就业班笔记移动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:

移动端弹出框的特点:

推荐网站

动画网站：https://daneden.github.io/animate.css/

这个网站可以提供一些常用的动画，可以在做移动开发的时候可以参考这个网站的效果完成动画。

Zepto：http://zeptojs.com/

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。

Weiui：http://weui.github.io/weui/

微信UI库，它是微信前端团队提供给广大的微信开发者的一些ui组件库。方便开发这开发出和微信风格一致的内嵌应用。

项目三种布局分析

首页的适用场景：门户电商的首页   而且内容比较丰富  

分类页面的使用场景：单页面  全屏的布局当中会使用异步的交互ajax，web app 的开发模式当中会使用到Web app  网页程序 网页应用

移动web页面优点： 跨平台 android  ios，

Hybird app 现在流行起来的  混合应用  开发模式，套用嵌入移动web页面的应用所有的移动页面都可以

Native app 原生应用

购物车页面：任何地方都可以用到这样的布局。

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830