移動端實用資源整理

Mr_zhang發表於2018-06-04

CSS

1px邊框(解決不同解析度螢幕1px的寬窄不同)

縮放原理

.border-1px {
  position relative
}
.border-1px:after {
    display block
    content ``
    position absolute
    left 0
    bottom 0
    width 100%
    border-top 1px solid #ccc
 }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) .border-1px::after {
      transform scaleY(0.7)
      -webkit-transform scaleY(0.7)
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
  .border-1px::after {
      transform scaleY(0.5)
      -webkit-transform scaleY(0.5)
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
  .border-1px::after {
      transform scaleY(0.3333)
      -webkit-transform scaleY(0.3333)
}

隱藏移動端ios/android滾動條，使滾動流暢

隱藏滾動條，不影響滾動


::-webkit-scrollbar
  display none

流暢滾動

    //在滾動元素`css`中新增
 -webkit-overflow-scrolling touch // IOS系統
    overflow-scrolling touch // 安卓系統

偽元素（:或::都可以，::更準確，:相容好）與偽類(只能:)的區別

偽類與偽元素都是用於向選擇器加特殊效果
  • 偽類與偽元素的本質區別就是是否抽象創造了新元素
  • 偽類只要不是互斥可以疊加使用
  • 偽元素在一個選擇器中只能出現一次，並且只能出現在末尾
  • 偽類與偽元素優先順序分別與類、標籤優先順序相同

偽類標籤只對可以插入內容的標籤新增：div span

Vue中使用less根據解析度給元素新增背景圖片

按照less官方文件，url應當如下使用：

URLs
// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

故而有了根據螢幕解析度設定背景圖片程式碼

.bg-image(@url) {
  background-image: url(`@{url}@2x.png`);
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    background-image: url(`@{url}@3x.png`);
  }
}  // 報錯報錯 找不到路徑的

這裡要使用“~”符號來告訴less引號裡面的內容不需要編譯。

正確程式碼：

.bg-image(@url) {
    background-image:~"url(`@{url}@2x.png`)";
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: ~"url(`@{url}@3x.png`)";
    }
}

改變輸入框input，textarea的placeholder樣式，去除輸入框選中邊框高亮

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder  {
  //設定樣式
}
input:focus {    outline:none;}  /*  focus 標記*/

（原諒我一直沒找很完善的reset.css,這些在一些重置樣式檔案自帶的有，大家有好的完善的也可以告知我一下 ）

sticky 屬性

在使用 position: sticky 的時候，如果不指定 top 屬性是不會有效果的。
這個屬性是用來實現滾動吸頂的，具體可瞭解position。

JS

addEventListener VS onclick孰優孰劣

兩個都可以實現效果。
addEventListener 以及 IE 的 attachEvent可以實現繫結多個事件，如果你有這方面的需求的話（奇怪的是你總會的）。
addEventListener的第三個引數可以用來控制監聽器對於冒泡事件的響應，大部分情況是false，如果置為true，則響應事件的捕獲階段。事件的響應分割槽為三個階段 ：捕獲、目標、冒泡階段。
onclick繫結的多個事件會被覆蓋，後者覆蓋前者。
考慮到相容ie，可以寫一個原生的事件繫結相容方案：

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent(`on`+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

// example
addEvent(
    document.getElementById(`myElement`),
    `click`,
    function () { alert(`hi!`); }
);

參考連結：addEventListener 與 onclick

圖片上傳按鈕以及預覽（轉載+解析）

//程式碼來源：https://www.jb51.net/article/120617.htm 這裡解析一下
<template>
 <div class="admin">
 <div class="admin-content">
  <div class="edit">
  <div class="avatar">
   <div class="img">
   <img :src="avatar" @click="setAvatar">
   <span>更改</span>
   </div>
   //圖片上傳按鈕
   <input type="file" name="avatar" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none" @change="changeImage($event)" ref="avatarInput">
  </div>
  <button type="button" @click="edit">確認修改</button>
  </div>
 </div>
 </div>
</template>
<script>
export default {
 data() {
     return {
      avatar: this.$store.state.administrator.avatar,
     }
 },
 methods: {
     edit() {
      // 確定修改後上傳
      if (this.$refs.avatarInput.files.length !== 0) {
       var image = new FormData()
       image.append(`avatar`, this.$refs.avatarInput.files[0])
       this.axios.post(`/avatar`, image, {
           headers: {
            "Content-Type": "multipart/form-data"
           }
       })
      } 
     },
     setAvatar() {
      //觸發按鈕的上傳事件 也會用label繫結for屬性
      this.$refs.avatarInput.click()
     },
    
     changeImage(e) {
      //從事件物件裡獲取檔案，利用檔案流讀取
      var file = e.target.files[0]
      var reader = new FileReader()
      var that = this
      reader.readAsDataURL(file)
      reader.onload = function(e) {
          that.avatar = this.result
      }
     }
   }
}
</script>

物件陣列排序

主要用到Array的sort()方法:

  • 語法

    arr.sort([compareFunction])

  • 引數
    compareFunction 可選
    用來指定按某種順序進行排列的函式。如果省略，元素按照轉換為的字串的各個字元的Unicode位點進行排序。
  • 返回值
    排序後的陣列。請注意，陣列已原地排序，並且不進行復制，即陣列已修改。

如果沒有指明 compareFunction ，那麼元素會按照轉換為的字串的諸個字元的Unicode位點進行排序。例如 “Banana” 會被排列到 “cherry” 之前。當數字按由小到大排序時，9 出現在 80 之前，但因為（沒有指明 compareFunction），比較的數字會先被轉換為字串，所以在Unicode順序上 “80” 要比 “9” 要靠前。

如果指明瞭 compareFunction ，那麼陣列會按照呼叫該函式的返回值排序。即 a 和 b 是兩個將要被比較的元素：

  • 如果 compareFunction(a, b) 小於 0 ，那麼 a 會被排列到 b 之前；
  • 如果 compareFunction(a, b) 等於 0 ， a 和 b 的相對位置不變。備註： ECMAScript 標準並不保證這一行為，而且也不是所有瀏覽器都會遵守（例如 Mozilla 在 2003 年之前的版本）；
  • 如果 compareFunction(a, b) 大於 0 ， b 會被排列到 a 之前。
  • compareFunction(a, b) 必須總是對相同的輸入返回相同的比較結果，否則排序的結果將是不確定的。

通俗點講，那數字排序為例,return a - b: 從小到大；return b - a : 從大到小。
常用的是物件陣列的排序，根據物件某一鍵值對排序，如下：

var compare = function (prop) {
    return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        /*
        *異常處理，或者轉型處理字串轉數字比較等
        */
        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }            
    } 
}

一鍵複製功能

主要用到 document.execCommand

copy() {
      let  googleSecuritKey = document.getElementById(`googleSecuritKey`);
      googleSecuritKey.select();
      try{
        if(document.execCommand(`copy`, false, null)){
          document.execCommand(`copy`);
          //一個彈窗元件而已
          this.$alert({
            msg: `已複製至剪貼簿！`
          }, true);
        }
      } catch (err){
        this.$alert({
          msg: `請選中後按command/ctrl+C或右鍵複製！`
        }, true);
      }
    },

該方法限制條件：

  1. DOM元素要可編輯，比如input或者eidtable屬性的div；
  2. 不可有disabled屬性，input的type不可以是hidden；
  3. 內容寬度不可為0，至少為1px；

那麼如果做一個只做資訊展示的內容，允許使用者一鍵複製，怎麼做呢？

我這邊選擇用一個width：1px的input用定位移動到旁邊資訊展示區下，用層級遮住。

<div class="text__strong">
    金鑰：<input id="googleSecuritKey" v-model="googleSecuritKey" type="text" style="width: 1px;border: none;position: relative; left: 2px; z-index: -1;"/>
    {{googleSecuritKey}}
    <span class="ui-btn ui-btn-default ui-btn-short float-r clearfix" @click="copy">複製</span>
</div>

解決科學計數法顯示數字問題

參考出處：JavaScript中科學計數法轉化為數值字串形式

以下兩種情況，JavaScript 會自動將數值轉為科學計數法表示

(1) 小於1且小數點後面帶有6個0以上的浮點數值：

JavaScript 程式碼:
0.0000003    // 3e-7
0.00000033   // 3.3e-7
0.000003     // 0.000003

(2) 整數位數字多於21位：

JavaScript 程式碼:
1234567890123456789012     //1.2345678901234568e+21
1234567890123456789012.1   //1.2345678901234568e+21
123456789012345678901      //123456789012345680000

解決方案：
JavaScript 程式碼:

function toNonExponential(num) {
    var m = num.toExponential().match(/d(?:.(d*))?e([+-]d+)/);
    return num.toFixed(Math.max(0, (m[1] || ``).length - m[2]));
}
toNonExponential(3.3e-7)     // "0.00000033"
toNonExponential(3e-7)       // "0.0000003"
toNonExponential(1.401e10)   // "14010000000"
toNonExponential(0.0004)     // "0.0004"

解析一下：

用.toExponential()將數字轉化為科學記數法表示，匹配正規表示式/d(?:.(d*))?e([+-]d+)/,獲取科學記數法中小數點後的字元及冪指數（e 後面的值），這樣可以確定數字是幾位小數。再用toFixed() 轉換成數值表示。

未完待續

相關文章