mobile_音悦台

音悦台

• less 能够 width = 1080/67.5rem;

• /**** 变量定义 ****/
  @px: 67.5rem;
  
  /**** Start ****/
  #wrap {
      width: 100%;
      height: 100%;
      
      background-color: #eee;
      #content {
          width: 1080/@px;
          height: 135/@px;
          
          background-color: #96b377;
      }
  }

 

• 头部 header
• Logo 用 h1 和 a 包裹

 

• 移动端的 点击元素 大多使用 <a> 模拟

 

• 移动端 默认有 a元素的高亮 设置成 透明色 

• a {
      -webkit-tap-hightlight-color: rgba(0, 0, 0, 0);
  }

 

• 两个 input 之间有缝 的 2 个解决方法

1. 父元素 font-size: 0;
2. float: left;

 

• 封装原生 js 操做 class

 

• 由于阻止冒泡，全部的 document 事件都不会执行，此时，补一个 e.preventDefault();

 

• 元素 js 获取焦点 ele.focus();
• 元素 js 失去焦点 ele.blur();

 

• 内容区    导航条

文本永不换行（实现长导航栏）

• nav

375 屏幕大小

• ul

white-space: nowrap;

float: left;    浮动/定位，由子元素撑开宽度

font-size: 0;

• 橡皮筋特效

touchstart

元素清除 动画.style.transition = "0s none";

拉：愈来愈难拉

• 比例    scale = 0.6 - translateX / (clientWidth*3111111111111111111111111111111111111111111111111111111111111111111111);    由 1 逐渐向 0 减少
• translateX = translateX * scale;        translate 始终在增长，只是增长地愈来愈小。

释放： 加速效果

• 获得此行代码的时间 sTime  = new Data().getTime();    // ms
• 元素.style.transition = "2s all ease 0s";
• 元素位置 = touchmoveX + speed*100;
• 回弹
• li 变成 行内块元素

font-size: 1rem;        注意：不是 1/@rem;

解决行内块的缝： 

• 父元素 font-size: 0;
• li 浮动 

 误触 解决方法： 

touchstart 设置 isClick = true; 在 touchmove 中 isClick = false;

 

• 内容区    无缝滑屏
• 抖动： 

手指在滑屏，可是图片被滑动

• 防抖动：

单方向→多方向（isFirst取第一次 move 一小段 touchmove，若是 touchmoveY 大于 touchmoveX，则本次滑屏始终禁止）

 

• 内容区    tab 选项卡

• 能够看到图中 港台 下面的小绿条

不能使用 border 实现

• 监控过渡结束后，再 loading 图 opacity = 1

tabWrap.addEventListener("transitionend", func, false);

tabWrap.removeEventListener(webkitTransitionend", func);

 

• 2D 变换 元素 的文本会在过渡时产生闪烁

加上 3D 效果

• 近大远小 的效果
• 解决文本闪烁

• // 加 3D 效果，由于 3D 效果渲染比 2D 快得多
  transformEle(ulList, "translateZ", 0.1);

 

• 即点即停

在滑动加速过程当中，点击屏幕，中止加速

• 关键点：

过渡 覆盖操做

过渡 在元素没加载完，没有过渡效果

没有中过程值，没有过渡效果

过渡 最终检测的是 起点到终点的整个过程，中间过程捕捉不到。

• Tween 算法 实现：        （检测元素过渡的 中间值） 

https://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html

• Tween {
• 中间过程： 正常加速 ---- 匀速

Linear: function {... ...},

• 两边效果： 橡皮筋回弹 ---- 

back + easeOut

先找到 back ，back 中有个 easeOut: function{... ...}

};

t    当前次数

b    元素的初始位置

c    元素 结束位置 与 初始位置 的距离差

d    总次数        （从0-100，是一次性跑过去，仍是 d 次跑过去）

s    回弹系数        s 越大，回弹越远        s 默认值 为 1.70158

Tween["Linear"]();        调用，返回值 当前次数运动到的位置

• 封装： 将一段过渡（加速 或者 回弹），分为几段去完成。
• （即点即停：内部使用定时器实现，在点击 touchstart 时，清除定时器）
• 注意：

每次开启定时器以前，记得先关，保证始终只有一个定时器在运行。

记得在次数完成时，关定时器。

• // 竖向 滑屏加速 与 橡皮筋特效 须要封装 translateY 的 transform 函数
  // 元素 目标位置 总时间 类型（匀速 或者 回弹）
  function tweenMove(ele, target, timeAll, type){ var t = 0; // t : 当前次数 var b = transformCss(ele,'translateY'); // b : 元素初始位置 var c = target - b; // c : 元素结束位置与初始位置 距离差 var d = timeAll/0.02; // d : 总次数 = 总时间/每次花费的时间 //重置开启定时器，清除上一次的定时器 var timer = 0; clearInterval(timer); timer = setInterval(function(){ t++; if(t > d){ clearInterval(timer); // 元素中止状态 中止定时器 }else{ var point = Tween[type](t,b,c,d); // 元素正常走的状态（加速和回弹） transformCss(ele,'translateY',point); }; },20); };

 

• 自定义 滚动条
• 滚动条逻辑 
• 滚动条的 height = （屏幕的height / 内容区的高）*屏幕的height
• var callBack = {

start: function(){

滚动条的显示

},         // 1. 触屏的状态

move: function(){

滚动条显示

滚动条移动

},        // 2. 监测 touchmove    3.加速状态

end: function(){}        // 4. 加速完的状态更新

};

• 做为 callBack 传入屏幕滑动 逻辑中，处理横向抖动问题