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 传入屏幕滑动 逻辑中，处理横向抖动问题
