關於這一次h5踩到的坑

場景1：返回彈窗

需求：頁面返回的時候彈窗確認是否返回，確認返回，取消留在當前頁面

// 點選返回的時候，路由攔截，並將單前頁面的路由保留下來
  beforeRouteLeave(to, from, next) {
    let self = this;
    if (to.name === "SeckillDetail" && self.countDown != "00:00:00") {
      this.selfNext = next //將next保留下來
      self.skipParams = {
        name: "SeckillDetail",
        query: to.query,
        fullPath: to.fullPath
      };
      self.currentParams = {
        name: from.name,
        query: from.query
      };
      self.dialogVisableBack = true;
    } else {
      next();
    }
  },
  
//點選彈窗的確認按鈕
    backSkip() {
      let _this = this;
      this.dialogVisableBack = false;
      this.showToast("訂單鎖定時長五分鐘，可前往我的秒殺支付訂單或取消訂單");
      setTimeout(()=>{
        this.dialogVisableBack = false;
        (this.selfNext)() //通過next跳轉，通過push和location.href跳轉無效
      },2000)
    },
//點選彈窗的取消按鈕，將攔截路由時保留的
    cancelBack() {
      this.dialogVisableBack = false;
        location.href =
          "main#/comfirm-order?orderId=" +
          this.currentParams.query.orderId +
          "&itemId=" +
          this.currentParams.query.itemId +
          "&projectId=" +
          this.currentParams.query.projectId +
          "&seckillId=" +
          this.currentParams.query.seckillId;
    },
複製程式碼

場景2：1px的border

ios其實可以用0.5px，but安卓不支援，so只能忍痛割愛

& .line {
  width: 236px;
  float: right;
  height: 1px;
  margin: 11px 0px;
  position: relative;
  border: none;
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    background: #ccc;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
    }
複製程式碼

場景3：vue專案加入百度統計

var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?你的程式碼";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();
複製程式碼

router.beforeEach((to, from, next) => {
    if (to.path) {
        _hmt.push(['_trackPageview', '/#' + to.fullPath]);
    }
    next();
}
複製程式碼

場景4：app端h5的title只能識別一次的問題

// main.js

import { setMetaTitle } from './js/utils.js'

Vue.directive('title', {
	inserted: function (el, binding) {
	 setMetaTitle(binding.value)
	}
 })
複製程式碼

// utils.js
export function setMetaTitle(title) {
  document.title = title
  let mobile = navigator.userAgent.toLowerCase()
  if (/iphone|ipad|ipod/.test(mobile)) {
   let iframe = document.createElement('iframe')
   iframe.style.display = 'none'
   // 替換成站標favicon路徑或者任意存在的較小的圖片即可
   iframe.setAttribute('src', 'static/img/blank.png')
   let iframeCallback = function () {
    setTimeout(function () {
     iframe.removeEventListener('load', iframeCallback)
     document.body.removeChild(iframe)
    }, 0)
   }
   iframe.addEventListener('load', iframeCallback)
   document.body.appendChild(iframe)
  }
 }
複製程式碼

// 需要設定title的頁面中
<h2 v-title="'確認訂單'"></h2>
複製程式碼

場景5：手機息屏或者長按或者長按滑動，頁面定時器暫停的問題（微信親測有效，app端無解T.T，最後請app端幫忙監控，當app在開屏的時候呼叫checkViChangeTotal）

// 帶有定時器的頁面
  mounted() {
    this.getData();//頁面資料請求方法
    document.addEventListener("visibilitychange", _self.checkViChangeTotal);
  },
  method:{
    checkViChangeTotal() {
      if (!document.hidden) {
      // 利用h5中hidden這個屬性，如果頁面由息屏開啟，重新請求
        this.getData();
      }
    },
  },
  // 需要提醒的是vue專案中，addEventListener的事件在切換頁面之前記得要移除，不然不會自動銷燬
  beforeDestroy() {
  let _this = this;
  document.removeEventListener(
    "visibilitychange",
    _this.checkViChangeTotal
  );
}
複製程式碼

場景6：vue路由頻繁切換的時候，會有部分白屏問題，下拉後恢復正常

mounted() {
   this.setPosition(); 
},
method:{
  setPosition() {
      var oTop = $(".page-center").offset().top;
        //獲取導航欄的高度，此高度用於保證內容的平滑過渡
        var martop = $('.page-center').outerHeight();
        var sTop = 0;
        // 監聽頁面的滾動
        $(window).scroll(function () {
            // 獲取頁面向上滾動的距離
            sTop = $(this).scrollTop();
            // 當導航欄到達螢幕頂端
            if (sTop >= oTop) {
                // 修改導航欄position屬性，使之固定在螢幕頂端
                $(".page-center").css({ "position": "fixed", "top": "0" });
                // 修改內容的margin-top值，保證平滑過渡
                $(".page-bottom").css({ "margin-top": martop });
            } else {
                // 當導航欄脫離螢幕頂端時，回覆原來的屬性
                $(".page-center").css({ "position": "static" });
                $(".page-bottom").css({ "margin-top": "0" });
            }
        });
    },  
}

複製程式碼

場景7：iphoenX適配問題

// dom部分
<div class="adapt"></div>
複製程式碼

// css部分，利用media做你想要的適配，我這裡通過一個白色div留出安全距離防擋
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .adapt {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 34px;
    background: #fff;
  }
}
複製程式碼

場景8：通過一個屬性改變select下拉角標的樣式

//dom部分
    <div class="item" style="padding:0px;">
        <span class="card_info">
            <select  id="cardType"  v-model="orderData.card_type" :disabled="!orderData.is_update">
                <option value="">請選擇證件型別</option>
                <option value="大陸身份證">大陸身份證</option>
                <option value="軍官證">軍官證</option>
                <option value="護照">護照</option>
                <option value="港澳臺身份證">港澳臺身份證</option>
            </select>
            <i class="tran" v-if="orderData.is_update"><img src="../assets/arrow.png"/></i>
        </span>
        <input placeholder="請輸入證件號" id="cardNum" v-model="orderData.card_num" 
        :readonly="!orderData.is_update" 
        style="padding:18px 0px;min-width:170px">
    </div>
複製程式碼

//核心css
      .tran {
        width: 15px;
        height: 15px;
        display: inline-block;
        vertical-align: middle;
        pointer-events: none;//點選穿透
        margin-left: -22px;//讓下標能覆蓋到select上面
        position: relative;
        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
      }
複製程式碼