前言

本人所說的小程序，都是基于mpvue框架而上的，因此BUG可能是原生小程序的，也有可能是mpvue的。

問題描述

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

原因

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

解決方案

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

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

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

/** * 父組件*/// html<childInput @input="onInput"/> <-- 注意這里不能使用:value=value賦予初始值，否則又會出現閃爍的BUG，因為此時就等同于v-model了// jsimport 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"/>// jsexport default { data(){ return {  value:'' } }}

問題描述：輸入框文字出現重影，如下

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

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

微信官方字體規范如下：

修改后的加粗效果如下：

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。