H5開發踩坑記錄（總有你用的到的，持續更新）

一、url轉碼，url傳值得時候中文會被轉義，通過 decodeURIComponent（ ） 進行轉碼

this.url = decodeURIComponent(item.split('=')[1])

編碼的話用encodeURI( )

son.name = encodeURI(infoJson.name)

二、H5頁面在ios中滑動不流暢問題，可以通過css進行解決，兼容safari瀏覽器。

//這三句缺一不可
height: 100%;
overflow-y:scroll;
-webkit-overflow-scrolling:touch;

還有一種辦法就是在body上設置 overflow-x:hidden; 在需要滾動的元素上設置 overflow-y: auto 這個也可以解決

三、vue中v-html css樣式不生效問題

去掉 style標籤中的scope

四、vantUI中的下拉刷新與頁面滾動衝突問題

我的解決辦法是 給標籤加上禁用屬性，然後頁面中寫上監聽scroll的方法，滾動距離爲0的時候去開啓下拉刷新，大於0的時候則禁用下拉刷新功能，這樣就完美解決了下拉刷新與頁面滾動衝突的問題

有的時候會監聽不到頁面滾動距離，window.addEventListener('scroll', this.handleScroll,true)第三個true屬性是關鍵，可以alert出scrollTop值看看，再根據需求去判斷

mounted() {
  window.addEventListener('scroll', this.handleScroll,true)
},
methods: {
    //var scrollTop = 0;
    // if(document.documentElement && document.documentElement.scrollTop) {
    //     scrollTop = document.documentElement.scrollTop;
    // } else if(document.body) {
    //     scrollTop = document.body.scrollTop;
    // }
  //監聽頁面滾動事件，來控制下拉刷新的禁用與開啓
  handleScroll () {
    const scrollHeight = document.getElementById('box__')
    //獲取滾動距離，scrollTop屬性
    let scrollTop = scrollHeight.scrollTop
    if(scrollTop == 0){
      this.refreshShow = false;
    }else{
      this.refreshShow = true;
    }
  },
}

五、vue中使用canvas對網頁進行裁剪

先引入html2canvas

npm install html2canvas --save

useCORS: true 這句話很重要，允許服務器跨域，裁剪的圖片資源是不允許跨域的，服務端要處理跨域

再圖片上加入跨域屬性 crossorigin="Anonymous"

<template>
    <img :src="head" alt="" crossorigin="Anonymous" class="head_">
</template>

import html2canvas from 'html2canvas';    //引入

canvasImg() {
  let ref = this.$refs.faultTree // 截圖區域
  html2canvas(ref, {
    backgroundColor: '#fff',
    useCORS: true    //****允許跨域****
  }).then((canvas) => {
    let img = canvas.toDataURL('image/png')    //爲base64格式的圖片，自行按需轉換
  })
},

六、vue不識別textarea的 ↵ 換行符號

<p v-html="textarea"></p>
//改成pre標籤就可以識別換行符了
<pre v-html="textarea"></pre>

七、移動端去除input type爲number的箭頭

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
  }