摘要:觸摸情況下,如果釋放時沒有達到過渡條件而回彈時不會觸發這個函數獲取當前索引回調函數,當你輕觸后執行。設置回調函數,用來處理服務器響應,使用。
在日常工作中,時常會碰到各種各樣的坑,有時真的覺得很多時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上,希望自己能夠跨越重重阻礙,越走越遠。學會時常總結,不斷提升自己。
本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑,一方面加深自己對于該部分的理解,另一方面希望能夠分享給大家,知識在于分享,當然踩過的坑也不例外(滑稽)。
目錄margin 重疊問題
placeholder 自定義樣式
偽類和偽元素
title 超出省略
scroll 自定義樣式
sticky 定位
配置 swiper
移動端鍵盤遮擋問題
異步回調解決方案
1. margin 重疊問題這是一個比較常見的經常在開發中碰到的問題,這里就不多說了,常見解決辦法:
1. 創建新的 BFC 如 overflow: hidden; 2. 使用 padding 3. 盡量使用同一方向的 margin2. placeholder 自定義樣式
之前開發項目中碰到的需求,兼容寫法如下:
/* IE 9 及以下版本不支持 */ input:-ms-input-placeholder { } input:-moz-placeholder { } input::-moz-placeholder { } input::-webkit-input-placeholder { }3. 偽類和偽元素
這兩者很容易混淆,說的簡單的一點,兩者的區別在于:
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 //內層軌道,滾動條中間部分(除去) ::-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 比較有局限性,只能修改顏色,如果想要完美兼容,那么只能自己模擬實現一個 scrollbar 了。
6. sticky 定位粘性定位,是一個比較有趣的 CSS3 屬性,粘性定位是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位,之后為固定定位。
實例 demo : 粘性定位
7. 配置 SwiperSwiper 是一個使用率很高的插件,這里說一些比較陌生的屬性與方法:
//活動塊居中 centeredSlides: true, //觸摸距離與 slide 滑動距離的比率 touchRatio: 0.5, //當 swiper 樣式或者子元素改變時,會自動初始化 swiper ,默認 false observer: true, //swiper從當前slide開始過渡到另一個slide時執行。觸摸情況下,如果釋放slide時沒有達到過渡條件而回彈時不會觸發這個函數 onSlideChangeStart: function(swiper) { //獲取當前索引 console.log(swiper.realIndex); }, //回調函數,當你輕觸(tap)Swiper后執行。 onTap: function(swiper) { //獲取 tap 索引 mySwiper.slideTo(swiper.clickedIndex); }8. 移動端鍵盤遮擋問題
有些時候,如:需要將某一 button 固定到屏幕底部,這個時候如果彈出鍵盤,那么 button 則會跟著跑到鍵盤上面(無論是 absolute 還是 fixed),所以可以在 focus 的時候,隱藏 button,而在 blur 的時候顯示 button ,但是這時有一個問題:在安卓手機上沒有問題,收起鍵盤可以出發 blur 事件,但是 IOS 端則沒有觸發,所以解決辦法是,可以改用 resize 事件替代 blur 事件。
9. 異步回調解決方案異步處理一直以來都是 js 極其重要的一部分,這里暫不提框架,原始的異步處理一般是:
創建異步對象XMLHttpRequest。 設置請求參數(請求方式,請求資源的相對路徑,是否異步)。 設置回調函數,用來處理服務器響應,使用onreadystatechange。 獲取異步對象的readyState屬性,根據服務器返回狀態信息判斷是否請求成功。
如果存在多個請求,且數據相互有依賴關系的話,代碼寫起來會比較復雜,看起來雜亂無章,同時不利于后期維護。在 ES6 中,提出了 Promise 的概念,給出了異步回調的解決方案:
var task = new Promise(function(resolve, reject) { if (/* 異步操作成功 */){ resolve(result); } else { reject(error); } }); task.then(function(response) { // success }, function(error) { // fail });
可以看出,使用 Promise 可以通過鏈式調用避免了層層嵌套,同時便于代碼閱讀和理解。
參考文獻詳解 CSS 屬性 - 偽類和偽元素的區別
CSS | MDN
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/113036.html
摘要:本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑,一方面加深自己對于該部分的理解,另一方面希望能夠分享給大家,知識在于分享,當然踩過的坑也不例外滑稽。 在日常工作中,時常會碰到各種各樣的坑,有時真的覺得很多時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上,希望自己能夠跨越重重阻礙,越走越遠。學會時常總結,不斷提升自己。 本文章旨在總結開發過程中碰到的容易忘記或者比較重要的...
摘要:本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑,一方面加深自己對于該部分的理解,另一方面希望能夠分享給大家,知識在于分享,當然踩過的坑也不例外滑稽。 在日常工作中,時常會碰到各種各樣的坑,有時真的覺得很多時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上,希望自己能夠跨越重重阻礙,越走越遠。學會時常總結,不斷提升自己。 本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑,...
摘要:本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑,一方面加深自己對于該部分的理解,另一方面希望能夠分享給大家,知識在于分享,當然踩過的坑也不例外滑稽。 在日常工作中,時常會碰到各種各樣的坑,有時真的覺得很多時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上,希望自己能夠跨越重重阻礙,越走越遠。學會時常總結,不斷提升自己。 本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑,...
摘要:本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑,一方面加深自己對于該部分的理解,另一方面希望能夠分享給大家,知識在于分享,當然踩過的坑也不例外滑稽。 在日常工作中,時常會碰到各種各樣的坑,有時真的覺得很多時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上,希望自己能夠跨越重重阻礙,越走越遠。學會時常總結,不斷提升自己。 本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑,...
閱讀 1268·2023-04-26 01:38
閱讀 1468·2021-11-15 11:39
閱讀 3259·2021-09-22 15:43
閱讀 2652·2019-08-30 15:55
閱讀 2057·2019-08-30 14:17
閱讀 2859·2019-08-29 14:16
閱讀 3071·2019-08-26 18:36
閱讀 2616·2019-08-26 12:19