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 傳入屏幕滑動 邏輯中，處理橫向抖動問題