詳解小程序輸入框閃爍及重影BUG解決方案
前言
本人所說(shuō)的小程序，都是基于mpvue框架而上的，因此BUG可能是原生小程序的，也有可能是mpvue的。
問(wèn)題描述
在小程序input組件中，如果使用v-model進(jìn)行雙向綁定，在輸入時(shí)會(huì)出現(xiàn)光標(biāo)閃爍的BUG。
原因
造成這個(gè)BUG的原因，是因?yàn)樵谠〕绦騣nput組件上，進(jìn)行了封裝。才導(dǎo)致光標(biāo)閃爍的問(wèn)題。
解決方案
這里提供了兩種解決方案。各有各的優(yōu)勢(shì)，請(qǐng)選取合適的方案：
一、棄用v-model,使用@input
適用于input組件單純是用戶手動(dòng)輸入的，而沒(méi)有像授權(quán)獲取手機(jī)號(hào)，然后自動(dòng)填入input組件中。這種需要賦予初始value的情況。即適用于單向綁定，而不是雙向綁定。
/**
* 父組件
*/
// html
<childInput @input="onInput"/> <-- 注意這里不能使用:value=value賦予初始值，否則又會(huì)出現(xiàn)閃爍的BUG，因?yàn)榇藭r(shí)就等同于v-model了
// js
import ChildInput from './ChildInput'
export default {
components:{ ChildInput },
data(){
return {
value:''
}
},
methods(){
onInput(e){
this.value = e
}
}
}
/**
* 子組件 ChildInput
*/
// html
<input @input="$emit('input',$event)"/>
二、不封裝input組件，直接使用v-model
這種情況就是可以直接雙向綁定的了。具體原因還不清楚，可能是本身原生小程序的BUG。
/**
* 父組件,不使用封裝的子組件，直接使用原生組件。
*/
// html
<input v-model="value"/>
// js
export default {
data(){
return {
value:''
}
}
}
問(wèn)題描述：輸入框文字出現(xiàn)重影，如下
輸入框 在失去焦點(diǎn)和獲得焦點(diǎn)的切換過(guò)程中，能清晰的看到輸入框的問(wèn)題的重影現(xiàn)象，如上圖，經(jīng)過(guò)一番折騰，我找到bug的出錯(cuò)原因即初步解決方案，僅供參考
1、微信官方設(shè)計(jì)文檔給出了字體大小的規(guī)范，最小11pt，我自己設(shè)的是10pt，將其改成11pt之后，部分輸入框不再出現(xiàn)重影，而是微信官方渲染的加粗效果
微信官方字體規(guī)范如下：
修改后的加粗效果如下：
3、還有的輸入框扔會(huì)出現(xiàn)重影，細(xì)看，再繼續(xù)研究，發(fā)現(xiàn)是因?yàn)椋琭lex布局，使得，輸入框的長(zhǎng)度不一致，我把輸入框調(diào)成一樣寬度就可以，不過(guò)我也不知道具體為什么，你們可以試試
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文給大家分享了view.post()方法不靠譜的地方，以及post在7.0中的差異，需要的的朋友參考下本文吧2017-08-08
javascript中for/in循環(huán)及使用技巧
如果您希望一遍又一遍地運(yùn)行相同的代碼，并且每次的值都不同，那么使用循環(huán)是很方便的，本篇文章給大家介紹javascript中for/in循環(huán)及使用技巧 ，需要的朋友可以參考下2015-09-09
小程序自定義tab-bar踩坑實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于小程序自定義tab-bar踩坑實(shí)戰(zhàn)的相關(guān)資料,包括下載代碼、放置文件、修改JS文件、配置app.json和隱藏原生導(dǎo)航欄等步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-12-12
默認(rèn)的sort方法并不是按照整形數(shù)據(jù)來(lái)排序，而是用的字符串匹配方式，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-02-02
JS Object.preventExtensions(),Object.seal()與Object.freeze()用
這篇文章主要介紹了JS Object.preventExtensions(),Object.seal()與Object.freeze()用法,結(jié)合實(shí)例形式分析了javascript控制對(duì)象擴(kuò)展、密封、凍結(jié)等相關(guān)函數(shù)與操作技巧,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)左右輪播圖的具體代碼，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2017-01-01
這篇文章主要介紹了淺談JavaScript 代碼簡(jiǎn)潔之道，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
詳解組件庫(kù)的webpack構(gòu)建速度優(yōu)化
這篇文章主要介紹了詳解組件庫(kù)的webpack構(gòu)建速度優(yōu)化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
js實(shí)現(xiàn)圖片在未加載完成前顯示加載中字樣
首先判斷瀏覽器再判斷圖片是否加載完成，如果還未加載就顯示“加載中...”，思路及代碼如下2014-09-09
本文詳細(xì)介紹了DOM的概念和常用操作，文檔對(duì)象模型 (DOM) 是 HTML 和 XML 文檔的編程接口。它提供了對(duì)文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對(duì)該結(jié)構(gòu)進(jìn)行訪問(wèn)，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容，感興趣的朋友可以參考閱讀本文2023-04-04