這篇文章將為大家詳細講解有關小程序中輸入框閃爍及重影BUG如何解決，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供新華網(wǎng)站建設、新華做網(wǎng)站、新華網(wǎng)站設計、新華網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、新華企業(yè)網(wǎng)站模板建站服務，十余年新華做網(wǎng)站經驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

問題描述

在小程序input組件中，如果使用v-model進行雙向綁定，在輸入時會出現(xiàn)光標閃爍的BUG。

原因

造成這個BUG的原因，是因為在原生小程序input組件上，進行了封裝。才導致光標閃爍的問題。

解決方案

這里提供了兩種解決方案。各有各的優(yōu)勢，請選取合適的方案：

一、棄用v-model,使用@input

適用于input組件單純是用戶手動輸入的，而沒有像授權獲取手機號，然后自動填入input組件中。這種需要賦予初始value的情況。即適用于單向綁定，而不是雙向綁定。

/** 
* 父組件
*/

// html
<childInput @input="onInput"/> <-- 注意這里不能使用:value=value賦予初始值，否則又會出現(xiàn)閃爍的BUG，因為此時就等同于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:''
 }
 }
}

問題描述：輸入框文字出現(xiàn)重影，如下

輸入框 在失去焦點和獲得焦點的切換過程中，能清晰的看到輸入框的問題的重影現(xiàn)象，如上圖，經過一番折騰，我找到bug的出錯原因即初步解決方案，僅供參考

1、微信官方設計文檔給出了字體大小的規(guī)范，最小11pt，我自己設的是10pt，將其改成11pt之后，部分輸入框不再出現(xiàn)重影，而是微信官方渲染的加粗效果

微信官方字體規(guī)范如下：

修改后的加粗效果如下：

3、還有的輸入框扔會出現(xiàn)重影，細看，再繼續(xù)研究，發(fā)現(xiàn)是因為，flex布局，使得，輸入框的長度不一致，我把輸入框調成一樣寬度就可以，不過我也不知道具體為什么，你們可以試試

關于“小程序中輸入框閃爍及重影BUG如何解決”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

分享文章：小程序中輸入框閃爍及重影BUG如何解決
本文網(wǎng)址：http://jinyejixie.com/article4/pshcie.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、虛擬主機、App設計、云服務器、服務器托管、網(wǎng)站設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)