web移動開發總結(六)

總結

1. 分類左側的點選吸頂
2. 移動端的滑動事件 (重點)
3. 移動端點選事件延遲和解決 (重點)
4. 移動端的zepto框架
5. rem的概念和實現螢幕適配 (重點)
6. rem工具的使用實現jd專案

分類頁面左側的點選吸頂效果

1. 需求

2. 點選了左側分類的選單

3. 位移到當前點選的分類選單 到頂部的位置

4. 位移為 （-當前選單索引*選單高度）

5. 位移的時候還需要新增過渡效果 慢慢的上去

6. 當選單需要位移的距離超過了最小位移的距離 預設為最小位移距離

7. 最小位移距離 父元素高度-子元素高度

8. 思路

9. 給分類左側新增點選事件

10. 先給所有選單都新增一個索引的屬性

11. 拿到當前點選選單的索引 和 選單高度

12. 計算當前點選選單的位移距離 == - 索引 * 高度

13. 獲取swiper-wrapper 給他設定這個位移距離 判斷如果沒有超過最大位移的距離就設定計算的距離 如果超過最大位移距離 設定為最大的位移距離

14. 設定過渡效果

15. 清除所有li的active位移 給當前點選的li新增active類名

移動端click事件的延遲問題

1. 在移動端手機裡面 click事件是有一定延遲的 大概300ms
   延遲的原因是手機端為了相容雙擊操作 如果300ms以內點選2次就認為是雙擊事件
   如果300ms以內只點選了一次就是單擊操作
2. 解決方案 就是使用touch系列事件封裝一個不延遲的click事件

使用fastclick包解決點選事件延遲問題

1. 引包引入fastclick
2. 給頁面的body元素繫結fastclick 間接為所有元素繫結了
   // 繫結fastclick 給body繫結 因為元素都在body裡面 間接為所有元素都繫結了fastclick
   window.addEventListener(‘load’, function() {
   new FastClick(document.body);
   }, false);
3. 後續就直接新增click就不會延遲了
   // 繫結了fastclick後 新增事件的方式還是和之前一樣加click事件 但是這個click已經不會延遲了
   div.addEventListener(‘click’, function() {
   console.log(‘點選事件’);
   });

移動端一些觸控事件

1. touchstart 手指觸控的時候觸發
2. touchmove 手指移動的時候觸發
3. touchend 手指觸控離開的時候觸發
4. touchcancel 觸控意外中斷會觸發 觸控的時候遇到了優先順序更高的事件

解決延遲的原理使用移動端touch相關事件模擬一個click (也就tap)

1. 因為touch事件在手機裡面是不會延遲
2. 只是觸發了touchstart和touchend但是沒有觸發touchmove 就認為是一個單擊操作(單擊事件)
3. 如果觸發touchmove 表示手指不僅單擊還觸發移動 不是一個單擊操作
4. 還可以新增事件判斷 記錄滑動開始的時間和滑動結束的時間進行相減判斷 手指按下的時間有沒有超過300ms 不超過才是單擊操作

移動端的js庫 zepto

1. zepto: 是一個輕量級用來操作DOM元素的JS庫 類似於jquery 所有方法用法都和jquery一樣 只要會使用jquery就會使用zepto
2. 為什麼要使用zepto: 輕量級 對移動端相容性好一點
3. 但是要注意zepto的版本問題 有些老版本的zepto是分模組的 如果要使用tap之類的事件需要引入touch.js模組
4. 可以把所有模組打包到一個zepto.js裡面(使用node編譯)
5. 在移動端如果使用了zepto千萬不能再使用jquery 都是$會衝突

移動端頁面螢幕適配

1. 為什麼要適配螢幕： 手機螢幕很小 頁面都是全屏 不同的大小的螢幕 展示內容不一樣
2. 希望頁面在任何螢幕都保持一個等比例 希望每個螢幕看到的效果都是一樣的
3. 手機小 頁面文字 圖片 所有內容 都比較小
4. 手機大 頁面文字 圖片 所有內容 都比較大

使用相對的單位來實現螢幕適配

1. em : element 相對自身元素的字型大小
   div自身字型大小16 1em=16px
   div自身字型大小20 1em=20px
2. rem : root element 相對根元素的字型大小
   html元素的字型大小16px 1rem = 16px
   html元素的字型大小30px 1rem = 30px
3. 相對單位的概念就這個單位的值不是固定的 而是參照字型大小而變化而變化

rem適配的原理

1. 頁面中都把px寫成rem相對單位 都相對根元素的字型大小
2. 不同螢幕改變根元素的字型大小的值
3. 使用媒體查詢方式改變根元素大小值
   @media(width:750px){
   html{
   font-size:200px;
   }
   }
   @media(width:375px){
   html{
   font-size:100px;
   }
   }
4. 使用JS方式來改變rem的值
   // 假設一個設計稿的寬度 750
   var DesignWidth = 750;
   var DesignFontSize = 200;
   // 獲取當前視口的寬度
   var nowWidth = document.documentElement.clientWidth;
   /750 / 200 == 375 / 100
   設計稿 / 設計稿根元素 == 當前螢幕 / 當前螢幕根元素
   375 / (750 / 200) == 100
   當螢幕 / (設計稿 / 設計稿的根元素)
   320 / (750 / 200) == 85.3333px /
   / 4 / 2 == 2 / x
   2 / ( 4 / 2 ) == 1/
   var nowFontSize = nowWidth / (DesignWidth / DesignFontSize);
   document.documentElement.style.fontSize = nowFontSize + ‘px’;

使用rem實現 jd頁面的螢幕適配 （注意只有原生移動web才能使用rem 響應式開發不能使用）

1. 原理把頁面的px轉成rem單位
2. 根元素字型大小要隨著螢幕變化而變化（等比例變化）
3. 根元素字型變化 頁面使用rem單位的大小也會自動跟著變化

步驟

1. 把頁面所有rem單位都寫成px base.less裡面 預設body的font-size是 1.4rem其實是14px
2. 開啟本地的px轉rem的工具tool.html
3. 把less程式碼複製到裡面的左邊 然後設定設計稿寬度 375 基礎字型值100px 因為我們按照375寫的程式碼就寫375 在375螢幕下根元素是100px
4. 去掉自動生成rem的核取方塊
5. 點選轉換生成對應的rem單位
6. 在頁面中引入更改根元素字型大小的JS程式碼

今日總結

1. 移動端的觸控事件 touchstart touchmove touchend touchcancel

2. 移動點選事件的延遲： 原因是為了相容雙擊 300ms以內點選2次就是雙擊操作1次就是單擊

3. 解決延遲方案

   1. 封裝一個tap事件 使用touchstart 和 touchmove touchend事件模擬 如果只觸發了touchstart touchend 沒有觸發touchmove 認為是單擊操作
   2. 使用zepto第三方的庫裡面的tap事件
   3. 使用fastclick包 專門解決問題

4. 移動端到底用什麼點選事件： 一般全部使用tap事件

5. zepto庫基本使用： 跟jquery一樣 只有模組不一樣 有些模組沒在主包 單獨引入一些其他模組

6. 移動端螢幕適配： 主流使用rem

7. rem適配本質：

   1. 把所有單位使用rem這種相對單位 (只有相對單位才能自適應)
   2. 當螢幕變化的時候 讓螢幕的字型 隨著螢幕變化而變化

8. rem根元素變化公式
   1rem = 根元素字型大小 預設是16px
   假設設計稿的大小750 設計稿 根元素大小是200px 375螢幕剛好是設計稿的一半 那麼375根元素大小也是設計稿對應根元素大小一半就是100px
   設計稿寬度 / 設計稿根元素 == 當前螢幕寬度 / 當前螢幕根元素
   375 / (750 / 200) == 100
   當螢幕寬度 / (設計稿寬度 / 設計稿的根元素)
   320 / (750 / 200) == 85.3333px /
   / 4 / 2 == 2 / x
   2 / ( 4 / 2 ) == 1
   公式: 當前螢幕對應的字型大小 = 當螢幕寬度 / (設計稿寬度 / 設計稿的根元素)
   假如將來設計稿大小不一樣 就按照公式套就行了

   淘寶的rem適配 當前螢幕的字型大小 = 標準螢幕字型大小100px/標準螢幕寬度375 * 當前螢幕的寬度

9. rem工具的使用

   1. 你要知道你當前設計稿寬度是多少比如750 (但是寫程式碼如果縮小了一倍)工具設計稿和你寫程式碼的真實寬度一樣是375
   2. 基礎字型值(當前寫程式碼螢幕比如375對應的根元素大小100)
   3. 左邊放寫px程式碼 點選pxtorem轉換成rem
   4. 在頁面中引入能夠動態改變根元素字型大小的JS(放在前面引入要優先讓html有字型大小跟頁面渲染有關係的優先執行)

找bug技巧

1. 多看bug(見多識廣)

2. 會找bug

3. 頁面結構bug 標籤是否有結束 標籤是否會多加結束 標籤單詞錯誤 標籤巢狀錯誤

4. 頁面樣式bug

   1. 樣式沒出來
   2. 樣式檔案沒引入
   3. 樣式生效沒有（審查元素找到要設定樣式的元素） 如果看不到 選擇器選錯 類名或者id寫錯
   4. 樣式有但沒有效果
   5. 樣式屬性是否寫 屬性前有感嘆號屬性錯了 或者值
   6. 樣式屬性是否被覆蓋或者繼承 樣式屬性有沒有中劃線
   7. 自己不知道怎麼寫樣式 居中（內容居中text-align:center）塊居中margin:0 auto;
   8. 引入bootstrap會出的樣式問題
   9. 沒有引入包
   10. 類名錯誤
   11. 發現覆蓋不了bootstrap選擇器優先順序不夠

5. 頁面功能bug

6. 功能沒生效

7. 檔案沒引入

8. 依賴的檔案沒引入（jquery zepto ）

9. 是否定義函式 有沒有被呼叫

10. 程式碼是否報錯 （單詞錯 賦值錯 變數名。。）

11. 看程式碼是否執行 （斷點除錯看看程式碼是否執行（事件沒被觸發 事件名錯誤 元素沒獲取到））

12. 一些獲取值的方式錯誤（相容性問題 單詞錯誤）

13. 邏輯錯誤 (程式碼執行順序是否符合你寫的順序 )

14. 變數名重複 全域性已經有變數 區域性又用var

15. 環境系統bug

16. 善於總結

17. 出了bug記錄下來 bug現象 bug原因 解決方案

移動web總結

1. 移動web開發的現狀： 前端最熱門的開發 市場大 需求大 工資高 程式碼少 相容性少 容易學

2. 移動web的開發方式

   1. 響應式開發方式 一個頁面適配多個終端
   2. 原生開發方式 單獨PC和移動端都寫一套程式碼

3. 響應式開發的原理： 媒體查詢
   @media(width:值){
   //條件成立執行的程式碼
   }
   判斷有3種
   width:值 等於這個值
   min-width:值 大於等於這個值 從小到大寫 向下覆蓋
   max-width:值 小於等於這個 從大到小寫 向上覆蓋

4. 響應式的開發框架
   bootstrap 最常用的
   MUI
   AmazeUI

5. bootstrap的使用

   1. 下載包
   2. 看懂文件 全域性CSS樣式（一些簡單類名） 元件 （標籤類名組合在一起的效果但是沒有互動） 外掛 （元件並帶有互動）
   3. 找到需要的樣式或者元件外掛 複製結構
   4. 需要修改樣式 審查元素找到樣式對應的類名 覆蓋 推薦外面使用id 方便覆蓋

6. 容器 container 佈局容器 居中 柵格系統 行和 列 row放到container裡面 col放到行裡面
   列有4個檔次 xs sm md lg
   一行最多分為12列 col-xs-1 col-xs-12

7. 導航條 輪播圖 摺疊選單collapse 標籤頁 表單表格 媒體物件 彈出框 提示工具 模態框 按鈕 響應式工具

8. 字型圖示上傳svg圖示下載程式碼引入css使用類名 原理是使用CSS3 web字型 引入對應字型檔案 使用圖示對應的編碼

9. 移動端基本概念 手機解析度通常比真實寬高大2倍 圖片都是按照解析度來設計 頁面CSS寬高是按照真實的寬高設定 使用圖片和背景圖要縮小一半來寫

10. 搭建jd首頁佈局 百分比佈局 + flex佈局

11. 頂部漸變效果 獲取滾動條高度

12. 倒數計時JS 獲取時間計算 分別計算時分秒十位個位來顯示倒數計時

13. 輪播圖使用swiper輪播圖

14. 背景圖背景圖定位原點和背景圖裁切

15. 分類左右2側 flex佈局

16. 分類左右2側滑動使用swiper滑動

17. swiper外掛的使用

18. 引入包 css

19. 引入js

20. 寫頁面結構

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      內容或者圖片
    </div>
  </div>
</div>
4. 如果滾動還需要設定樣式
  .swiper-container{
      height:100%;
  } 
  body,html父元素等都要設定100%高度
  .swiper-slide 高度自動
5. 對輪播圖外掛去初始化
    // 3. 初始化swiper的滑動
    var swiper = new Swiper('.swiper-container', {
     // 控制輪播圖滾動的方向 horizontal水平 vertical 垂直
        direction: 'vertical',
       //可以支援多個swiper-slide 可以有多個輪播圖
        slidesPerView: 'auto',
        //支援彈簧
        freeMode: true,
        //控制輪播圖動畫切換的速度  輪播圖動畫的時間
        speed: 300,
        //新增一個小手
        grabCursor: true,
        // 新增迴圈 無縫輪播圖 
        loop: true,
        //新增自動輪播圖 delay自動輪播的間隔時間
        autoplay: {
            delay: 1000,
            //到最後一張停止自動輪播圖 但是loop了後就停不下來了
            stopOnLastSlide: true,
            // 是否要當觸控的時候禁止自動輪播圖  ture就禁止 false不禁止
            disableOnInteraction: false,
        },
        // 給圖片直接新增間距
        // spaceBetween : 100,
        // 如果需要分頁器  小圓點
        pagination: {
            el: '.swiper-pagination',
        },
        // 如果需要前進後退按鈕  左右箭頭
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        //支援滑鼠滾輪  只有PC能用
        mousewheel: true,
    });

18. 移動端點選事件 有300ms延遲 可以使用touch事件模擬click 也可以使用第三方包fastclick解決
19. 常見移動端滑動事件 touchstart touchmove touchend e事件源物件 e.touches所有手指
    e.touches[0].clientX 手指在頁面上水平位置 e.touches[0].clientY 垂直位置
20. 移動端zepto庫 類似jquery 有jquery就不要使用zepto 不要同時引入2個包 $ 會衝突
21. rem: root element根元素 參照根元素html元素的字型大小 1html的字型大小16px 1rem=16px
22. rem的好處 相對html字型大小html字型大小不會隨意變化 統一所有使用rem的大小 實現寬度和高度的和內容都自適應
23. 使用rem實現網頁自適應的原理是通過媒體查詢 或者JS來不斷改變html的字型大小html字型大小改變 那麼使用rem單位大小都會被改變
24. rem工具 http://alurk.com/ 使用
    1. 開啟工具 輸入設計稿寬度(寫程式碼螢幕的寬度375)
       輸入基礎字型值(寫程式碼螢幕的寬度375根元素的字型大小100)
    2. 去掉後面的生成媒體查詢等勾(因為我們已經使用JS改變根元素了)
    3. 點選轉換把程式碼貼上回來

找網站和扒網站

1. bootstrap官網的案例 http://expo.bootcss.com/
2. 妹子UI的官網的案例 http://amazeui.org/showcase/
3. 無憂網路官網的案例 http://www.cnitc.net
4. 招聘網站上的一些專案
5. 扒網站
   1. 開啟 TeleportUltraPortable.exe 程式
   2. 點選左上角的file > new project wizard
   3. 點選第二個單選按鈕 Duplicate
   4. 點選下下一步 輸入要扒的網址 up裡面是扒幾層
   5. 一路下一步 儲存到一個目錄
   6. 點選中間上方的藍色開始箭頭開始扒
   7. 扒完了在目錄旁邊出一個資料夾 就是網站的資料夾

前端學習路線

1. https://zwxs.github.io/FrontEndMaterial/synthesis.html