web移動開發總結(六)

時間 2019-12-05

標籤 web 移動開發總結欄目 HTML 简体版

原文原文鏈接

總結

分類左側的點擊吸頂
移動端的滑動事件 (重點)
移動端點擊事件延遲和解決 (重點)
移動端的zepto框架
rem的概念和實現屏幕適配 (重點)
rem工具的使用實現jd項目

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

需求css
點擊了左側分類的菜單html
位移到當前點擊的分類菜單到頂部的位置前端
位移爲（-當前菜單索引*菜單高度）node
位移的時候還須要添加過渡效果慢慢的上去jquery
當菜單須要位移的距離超過了最小位移的距離默認爲最小位移距離web
最小位移距離父元素高度-子元素高度bootstrap
思路移動web開發
給分類左側添加點擊事件app
先給全部菜單都添加一個索引的屬性框架
拿到當前點擊菜單的索引和菜單高度
計算當前點擊菜單的位移距離 == - 索引 * 高度
獲取swiper-wrapper 給他設置這個位移距離判斷若是沒有超過最大位移的距離就設置計算的距離若是超過最大位移距離設置爲最大的位移距離
設置過渡效果
清除全部li的active位移給當前點擊的li添加active類名

移動端click事件的延遲問題

在移動端手機裏面 click事件是有必定延遲的大概300ms
延遲的緣由是手機端爲了兼容雙擊操做若是300ms之內點擊2次就認爲是雙擊事件
若是300ms之內只點擊了一次就是單擊操做
解決方案就是使用touch系列事件封裝一個不延遲的click事件

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

引包引入fastclick
給頁面的body元素綁定fastclick 間接爲全部元素綁定了
// 綁定fastclick 給body綁定由於元素都在body裏面間接爲全部元素都綁定了fastclick
window.addEventListener(‘load’, function() {
new FastClick(document.body);
}, false);
後續就直接添加click就不會延遲了
// 綁定了fastclick後添加事件的方式仍是和以前同樣加click事件可是這個click已經不會延遲了
div.addEventListener(‘click’, function() {
console.log(‘點擊事件’);
});

移動端一些觸摸事件

touchstart 手指觸摸的時候觸發
touchmove 手指移動的時候觸發
touchend 手指觸摸離開的時候觸發
touchcancel 觸摸意外中斷會觸發觸摸的時候遇到了優先級更高的事件

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

由於touch事件在手機裏面是不會延遲
只是觸發了touchstart和touchend可是沒有觸發touchmove 就認爲是一個單擊操做(單擊事件)
若是觸發touchmove 表示手指不只單擊還觸發移動不是一個單擊操做
還能夠添加事件判斷記錄滑動開始的時間和滑動結束的時間進行相減判斷手指按下的時間有沒有超過300ms 不超過纔是單擊操做

移動端的js庫 zepto

zepto: 是一個輕量級用來操做DOM元素的JS庫相似於jquery 全部方法用法都和jquery同樣只要會使用jquery就會使用zepto
爲何要使用zepto: 輕量級對移動端兼容性好一點
可是要注意zepto的版本問題有些老版本的zepto是分模塊的若是要使用tap之類的事件須要引入touch.js模塊
能夠把全部模塊打包到一個zepto.js裏面(使用node編譯)
在移動端若是使用了zepto千萬不能再使用jquery 都是$會衝突

移動端頁面屏幕適配

爲何要適配屏幕：手機屏幕很小頁面都是全屏不一樣的大小的屏幕展現內容不同
但願頁面在任何屏幕都保持一個等比例但願每一個屏幕看到的效果都是同樣的
手機小頁面文字圖片全部內容都比較小
手機大頁面文字圖片全部內容都比較大

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

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

rem適配的原理

頁面中都把px寫成rem相對單位都相對根元素的字體大小
不一樣屏幕改變根元素的字體大小的值
使用媒體查詢方式改變根元素大小值
@media(width:750px){
html{
font-size:200px;
}
}
@media(width:375px){
html{
font-size:100px;
}
}
使用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 響應式開發不能使用）

原理把頁面的px轉成rem單位
根元素字體大小要隨着屏幕變化而變化（等比例變化）
根元素字體變化頁面使用rem單位的大小也會自動跟着變化

步驟

把頁面全部rem單位都寫成px base.less裏面默認body的font-size是 1.4rem實際上是14px
打開本地的px轉rem的工具tool.html
把less代碼複製到裏面的左邊而後設置設計稿寬度 375 基礎字體值100px 由於咱們按照375寫的代碼就寫375 在375屏幕下根元素是100px
去掉自動生成rem的複選框
點擊轉換生成對應的rem單位
在頁面中引入更改根元素字體大小的JS代碼

今日總結

移動端的觸摸事件 touchstart touchmove touchend touchcancel
移動點擊事件的延遲：緣由是爲了兼容雙擊 300ms之內點擊2次就是雙擊操做1次就是單擊
解決延遲方案
1. 封裝一個tap事件使用touchstart 和 touchmove touchend事件模擬若是隻觸發了touchstart touchend 沒有觸發touchmove 認爲是單擊操做
2. 使用zepto第三方的庫裏面的tap事件
3. 使用fastclick包專門解決問題
移動端到底用什麼點擊事件：通常所有使用tap事件
zepto庫基本使用：跟jquery同樣只有模塊不同有些模塊沒在主包單獨引入一些其餘模塊
移動端屏幕適配：主流使用rem
rem適配本質：
1. 把全部單位使用rem這種相對單位 (只有相對單位才能自適應)
2. 當屏幕變化的時候讓屏幕的字體隨着屏幕變化而變化
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 * 當前屏幕的寬度
rem工具的使用
1. 你要知道你當前設計稿寬度是多少好比750 (可是寫代碼若是縮小了一倍)工具設計稿和你寫代碼的真實寬度同樣是375
2. 基礎字體值(當前寫代碼屏幕好比375對應的根元素大小100)
3. 左邊放寫px代碼點擊pxtorem轉換成rem
4. 在頁面中引入可以動態改變根元素字體大小的JS(放在前面引入要優先讓html有字體大小跟頁面渲染有關係的優先執行)

找bug技巧

多看bug(見多識廣)
會找bug
頁面結構bug 標籤是否有結束標籤是否會多加結束標籤單詞錯誤標籤嵌套錯誤
頁面樣式bug
1. 樣式沒出來
2. 樣式文件沒引入
3. 樣式生效沒有（審查元素找到要設置樣式的元素）若是看不到選擇器選錯類名或者id寫錯
4. 樣式有但沒有效果
5. 樣式屬性是否寫屬性前有感嘆號屬性錯了或者值
6. 樣式屬性是否被覆蓋或者繼承樣式屬性有沒有中劃線
7. 本身不知道怎麼寫樣式居中（內容居中text-align:center）塊居中margin:0 auto;
8. 引入bootstrap會出的樣式問題
9. 沒有引入包
10. 類名錯誤
11. 發現覆蓋不了bootstrap選擇器優先級不夠
頁面功能bug
功能沒生效
文件沒引入
依賴的文件沒引入（jquery zepto ）
是否認義函數有沒有被調用
代碼是否報錯（單詞錯賦值錯變量名。。）
看代碼是否執行（斷點調試看看代碼是否執行（事件沒被觸發事件名錯誤元素沒獲取到））
一些獲取值的方式錯誤（兼容性問題單詞錯誤）
邏輯錯誤 (代碼執行順序是否符合你寫的順序 )
變量名重複全局已經有變量局部又用var
環境系統bug
善於總結
出了bug記錄下來 bug現象 bug緣由解決方案

移動web總結

移動web開發的現狀：前端最熱門的開發市場大需求大工資高代碼少兼容性少容易學
移動web的開發方式
1. 響應式開發方式一個頁面適配多個終端
2. 原生開發方式單獨PC和移動端都寫一套代碼
響應式開發的原理：媒體查詢
@media(width:值){
//條件成立執行的代碼
} 站羣系統
判斷有3種
width:值等於這個值
min-width:值大於等於這個值從小到大寫向下覆蓋
max-width:值小於等於這個從大到小寫向上覆蓋
響應式的開發框架
bootstrap 最經常使用的
MUI
AmazeUI
bootstrap的使用
1. 下載包
2. 看懂文檔全局CSS樣式（一些簡單類名）組件（標籤類名組合在一塊兒的效果可是沒有交互）插件（組件並帶有交互）
3. 找到須要的樣式或者組件插件複製結構
4. 須要修改樣式審查元素找到樣式對應的類名覆蓋推薦外面使用id 方便覆蓋
容器 container 佈局容器居中柵格系統行和列 row放到container裏面 col放到行裏面
列有4個檔次 xs sm md lg
一行最多分爲12列 col-xs-1 col-xs-12
導航條輪播圖摺疊菜單collapse 標籤頁表單表格媒體對象彈出框提示工具模態框按鈕響應式工具
字體圖標上傳svg圖標下載代碼引入css使用類名原理是使用CSS3 web字體引入對應字體文件使用圖標對應的編碼
移動端基本概念手機分辨率一般比真實寬高大2倍圖片都是按照分辨率來設計頁面CSS寬高是按照真實的寬高設置使用圖片和背景圖要縮小一半來寫
搭建jd首頁佈局百分比佈局 + flex佈局
頂部漸變效果獲取滾動條高度
倒計時JS 獲取時間計算分別計算時分秒十位個位來顯示倒計時
輪播圖使用swiper輪播圖
背景圖背景圖定位原點和背景圖裁切
分類左右2側 flex佈局
分類左右2側滑動使用swiper滑動
swiper插件的使用
引入包 css
引入js
寫頁面結構

<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,
    });