国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

總結(jié)開發(fā)過程踩到的坑（一）

zeyu / 2850人閱讀

摘要：觸摸情況下，如果釋放時沒有達到過渡條件而回彈時不會觸發(fā)這個函數(shù)獲取當前索引回調(diào)函數(shù)，當你輕觸后執(zhí)行。設(shè)置回調(diào)函數(shù)，用來處理服務(wù)器響應(yīng)，使用。

在日常工作中，時常會碰到各種各樣的坑，有時真的覺得很多時候開發(fā)的經(jīng)驗都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠。學會時常總結(jié)，不斷提升自己。

本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對于該部分的理解，另一方面希望能夠分享給大家，知識在于分享，當然踩過的坑也不例外（滑稽）。

目錄

margin 重疊問題

placeholder 自定義樣式

偽類和偽元素

title 超出省略

scroll 自定義樣式

sticky 定位

配置 swiper

移動端鍵盤遮擋問題

異步回調(diào)解決方案

1. margin 重疊問題

這是一個比較常見的經(jīng)常在開發(fā)中碰到的問題，這里就不多說了，常見解決辦法：

1. 創(chuàng)建新的 BFC 如 overflow: hidden;
2. 使用 padding
3. 盡量使用同一方向的 margin
2. placeholder 自定義樣式

之前開發(fā)項目中碰到的需求，兼容寫法如下：

/* IE 9 及以下版本不支持 */
input:-ms-input-placeholder {

}
input:-moz-placeholder {

}
input::-moz-placeholder {

}
input::-webkit-input-placeholder {

}
3. 偽類和偽元素

這兩者很容易混淆，說的簡單的一點，兩者的區(qū)別在于：

CSS 偽類用于向某些選擇器添加特殊的效果。
CSS 偽元素用于將特殊的效果添加到某些選擇器。
4. title 超出省略

在移動端標題超出部分還是比較常見的，兼容性也 ok：

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
5. scroll 自定義樣式 
/* Chrome */
::-webkit-scrollbar    //滾動條整體部分
::-webkit-scrollbar-button   //滾動條兩端的按鈕
::-webkit-scrollbar-track   // 外層軌道
::-webkit-scrollbar-track-piece    //內(nèi)層軌道，滾動條中間部分（除去）
::-webkit-scrollbar-thumb //滾動條里面可以拖動的那個
::-webkit-scrollbar-corner   //邊角
::-webkit-resizer   ///定義右下角拖動塊的樣式

/* IE */
  scrollbar-base-color: #C0C0C0;
  scrollbar-base-color: #C0C0C0;
  scrollbar-3dlight-color: #C0C0C0;
  scrollbar-highlight-color: #C0C0C0;
  scrollbar-track-color: #EBEBEB;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #C0C0C0;
  scrollbar-dark-shadow-color: #C0C0C0;

Chrome 幾乎可以完整修改 scrollbar 樣式，但是 IE 比較有局限性，只能修改顏色，如果想要完美兼容，那么只能自己模擬實現(xiàn)一個 scrollbar 了。

6. sticky 定位

粘性定位，是一個比較有趣的 CSS3 屬性，粘性定位是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之后為固定定位。

實例 demo : 粘性定位

7. 配置 Swiper

Swiper 是一個使用率很高的插件，這里說一些比較陌生的屬性與方法：

//活動塊居中
centeredSlides: true,
//觸摸距離與 slide 滑動距離的比率
touchRatio: 0.5,
//當 swiper 樣式或者子元素改變時，會自動初始化 swiper ，默認 false
observer: true,
//swiper從當前slide開始過渡到另一個slide時執(zhí)行。觸摸情況下，如果釋放slide時沒有達到過渡條件而回彈時不會觸發(fā)這個函數(shù)
onSlideChangeStart: function(swiper) {
    //獲取當前索引
    console.log(swiper.realIndex);
},
//回調(diào)函數(shù)，當你輕觸(tap)Swiper后執(zhí)行。
onTap: function(swiper) {
    //獲取 tap 索引
    mySwiper.slideTo(swiper.clickedIndex);
}
8. 移動端鍵盤遮擋問題

有些時候，如：需要將某一 button 固定到屏幕底部，這個時候如果彈出鍵盤，那么 button 則會跟著跑到鍵盤上面（無論是 absolute 還是 fixed），所以可以在 focus 的時候，隱藏 button，而在 blur 的時候顯示 button ，但是這時有一個問題：在安卓手機上沒有問題，收起鍵盤可以出發(fā) blur 事件，但是 IOS 端則沒有觸發(fā)，所以解決辦法是，可以改用 resize 事件替代 blur 事件。

9. 異步回調(diào)解決方案

異步處理一直以來都是 js 極其重要的一部分，這里暫不提框架，原始的異步處理一般是：

創(chuàng)建異步對象XMLHttpRequest。
設(shè)置請求參數(shù)（請求方式，請求資源的相對路徑，是否異步）。
設(shè)置回調(diào)函數(shù)，用來處理服務(wù)器響應(yīng)，使用onreadystatechange。
獲取異步對象的readyState屬性，根據(jù)服務(wù)器返回狀態(tài)信息判斷是否請求成功。

如果存在多個請求，且數(shù)據(jù)相互有依賴關(guān)系的話，代碼寫起來會比較復雜，看起來雜亂無章，同時不利于后期維護。在 ES6 中，提出了 Promise 的概念，給出了異步回調(diào)的解決方案：

var task = new Promise(function(resolve, reject) {
 if (/* 異步操作成功 */){
     resolve(result);
 } else {
     reject(error);
 }
});

task.then(function(response) {
 // success
}, function(error) {
 // fail
});

可以看出，使用 Promise 可以通過鏈式調(diào)用避免了層層嵌套，同時便于代碼閱讀和理解。

參考文獻

詳解 CSS 屬性 - 偽類和偽元素的區(qū)別

CSS | MDN

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113036.html

相關(guān)文章

  • 總結(jié)開發(fā)過程踩到的坑（二）

    摘要：本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對于該部分的理解，另一方面希望能夠分享給大家，知識在于分享，當然踩過的坑也不例外滑稽。 在日常工作中，時常會碰到各種各樣的坑，有時真的覺得很多時候開發(fā)的經(jīng)驗都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠。學會時常總結(jié)，不斷提升自己。 本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的...

    laznrbfe 評論0 收藏0

  • 總結(jié)開發(fā)過程踩到的坑（三）

    摘要：本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對于該部分的理解，另一方面希望能夠分享給大家，知識在于分享，當然踩過的坑也不例外滑稽。 在日常工作中，時常會碰到各種各樣的坑，有時真的覺得很多時候開發(fā)的經(jīng)驗都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠。學會時常總結(jié)，不斷提升自己。 本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，...

    April 評論0 收藏0

  • 總結(jié)開發(fā)過程踩到的坑（三）

    摘要：本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對于該部分的理解，另一方面希望能夠分享給大家，知識在于分享，當然踩過的坑也不例外滑稽。 在日常工作中，時常會碰到各種各樣的坑，有時真的覺得很多時候開發(fā)的經(jīng)驗都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠。學會時常總結(jié)，不斷提升自己。 本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，...

    daryl 評論0 收藏0

  • 總結(jié)開發(fā)過程踩到的坑（三）

    摘要：本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對于該部分的理解，另一方面希望能夠分享給大家，知識在于分享，當然踩過的坑也不例外滑稽。 在日常工作中，時常會碰到各種各樣的坑，有時真的覺得很多時候開發(fā)的經(jīng)驗都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠。學會時常總結(jié)，不斷提升自己。 本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，...

    youkede 評論0 收藏0

發(fā)表評論

0條評論

zeyu

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<