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

資訊專(zhuān)欄INFORMATION COLUMN

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

instein / 1728人閱讀

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

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

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

目錄

margin 重疊問(wèn)題

placeholder 自定義樣式

偽類(lèi)和偽元素

title 超出省略

scroll 自定義樣式

sticky 定位

配置 swiper

移動(dòng)端鍵盤(pán)遮擋問(wèn)題

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

1. margin 重疊問(wèn)題

這是一個(gè)比較常見(jiàn)的經(jīng)常在開(kāi)發(fā)中碰到的問(wèn)題，這里就不多說(shuō)了，常見(jiàn)解決辦法：

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

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

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

}
input:-moz-placeholder {

}
input::-moz-placeholder {

}
input::-webkit-input-placeholder {

}
3. 偽類(lèi)和偽元素

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

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

在移動(dòng)端標(biāo)題超出部分還是比較常見(jiàn)的，兼容性也 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    //滾動(dòng)條整體部分
::-webkit-scrollbar-button   //滾動(dòng)條兩端的按鈕
::-webkit-scrollbar-track   // 外層軌道
::-webkit-scrollbar-track-piece    //內(nèi)層軌道，滾動(dòng)條中間部分（除去）
::-webkit-scrollbar-thumb //滾動(dòng)條里面可以拖動(dòng)的那個(gè)
::-webkit-scrollbar-corner   //邊角
::-webkit-resizer   ///定義右下角拖動(dòng)塊的樣式

/* 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 比較有局限性，只能修改顏色，如果想要完美兼容，那么只能自己模擬實(shí)現(xiàn)一個(gè) scrollbar 了。

6. sticky 定位

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

實(shí)例 demo : 粘性定位

7. 配置 Swiper

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

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

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

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

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

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

如果存在多個(gè)請(qǐng)求，且數(shù)據(jù)相互有依賴(lài)關(guān)系的話(huà)，代碼寫(xiě)起來(lái)會(huì)比較復(fù)雜，看起來(lái)雜亂無(wú)章，同時(shí)不利于后期維護(hù)。在 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 可以通過(guò)鏈?zhǔn)秸{(diào)用避免了層層嵌套，同時(shí)便于代碼閱讀和理解。

參考文獻(xiàn)

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

CSS | MDN

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

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

相關(guān)文章

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

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

    laznrbfe 評(píng)論0 收藏0

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

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

    April 評(píng)論0 收藏0

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

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

    daryl 評(píng)論0 收藏0

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

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

    youkede 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

instein

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<