@change問題

1. 需求描述

需求：選擇日期，當日期改變，則頁面相應(yīng)該日期的某些事件渲染

條件：

• 移動端
• vue框架
  

2. 問題產(chǎn)生及描述

問題： 兼容性差距，由于@change觸發(fā)方式不同，導(dǎo)致時間加載不夠統(tǒng)一，時間觸發(fā)出現(xiàn)問題。

描述如下：

使用vue做移動端時，由于需求需要，需要在頁面某處添加一個日期選擇的控件。由于不是面向用戶，內(nèi)部使用，因此本著不浪費資源的原則，直接使用h5自帶的input：

<input type="date">

emm...CSS樣式不再贅述。然后綁定數(shù)據(jù),綁定change事件監(jiān)聽值變化：

<input type="date" v-model="date" @change="selectDate">
selecrDate () {
  // do something...
}

當基本流程敲定后，在pc端沒問題。但注意，我們此時討論的是移動端效果，那么用pc端打開調(diào)試工具來模擬移動端機型顯然是不足以代表移動端真實場景的，因此需要在真機測試。ok，接下來，差異化出現(xiàn)。
由于@change的特性是當監(jiān)聽到數(shù)據(jù)發(fā)生變化時則執(zhí)行，因此差異便是暴露出來：

• 安卓：選擇完年月日，點擊確定后，數(shù)據(jù)變化，監(jiān)聽事件起作用；
• iOS： 點擊選擇日期，選擇年，監(jiān)聽到數(shù)據(jù)變化一次，執(zhí)行一次selectDate，選擇月，監(jiān)聽到數(shù)據(jù)變化，再次執(zhí)行，選擇日，監(jiān)聽到數(shù)據(jù)變化，再執(zhí)行……選擇不停，執(zhí)行不停。

由于此不同端所存在的差異化，導(dǎo)致了我們必須“兼容”這個問題。那么重點問題出現(xiàn)，如何兼容？

3. 解決方案

討論到此，我們必須想辦法先解決一個問題：如何在iOS端，阻止掉每一次選擇都自動執(zhí)行selectDate的問題。此時，經(jīng)過一番探尋查找，發(fā)現(xiàn)@blur方法可以替代iOS中的@change，說干就干，盤他：

<input type="date" v-model="date" @blur="selectDate">

ok,找個蘋果機試一下，完美，選擇年月日莫的問題，只有點擊確定之后才觸發(fā)該事件。但，所謂小人得志不可取，興高采烈的時候發(fā)現(xiàn)在安卓機上掛掉了。原因是在安卓機上選完以后，@blur事件并不會觸發(fā)，除非選擇完成之后，點擊別的區(qū)域來觸發(fā)此事件。因此，我們又面臨一個兼容問題，怎么同時保證在安卓和iOS系統(tǒng)上都能流暢運行呢？

有辦法——js辨別系統(tǒng)是安卓還是iOS：

const u = navigator.userAgent, app = navigator.appVersion;
// Android 判斷
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
// iOS 判斷
const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 

if (isAndroid) {
  // 這個是安卓操作系統(tǒng)
  // do something
}

if (isIOS) {
  // 這個是iOS操作系統(tǒng)
  // do something
}

有了此步驟，那接下來的事兒就簡單多了：

• 如果是安卓系統(tǒng)，則用@change;
• 如果是iOS系統(tǒng)，則用@blur;
• 由于是移動端，所以不考慮pc～；

完成～.～！

總結(jié)

總結(jié)以上，步驟如下：

• 進入頁面，執(zhí)行js腳本，判斷當前設(shè)備型號；
• 如果是安卓設(shè)備，執(zhí)行@change；
• 如果是iOS設(shè)備，執(zhí)行@blur。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。