欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解小程序輸入框閃爍及重影BUG解決方案

 更新時(shí)間：2018年08月31日 08:30:41   作者：xxxsimons  
這篇文章主要介紹了詳解小程序輸入框閃爍BUG解決方案,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

前言

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

問題描述

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

原因

造成這個(gè)BUG的原因，是因?yàn)樵谠〕绦騣nput組件上，進(jìn)行了封裝。才導(dǎo)致光標(biāo)閃爍的問題。

解決方案

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

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

適用于input組件單純是用戶手動(dòng)輸入的，而沒有像授權(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:''
 }
 }
}

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


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

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

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


修改后的加粗效果如下：


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

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

相關(guān)文章

最新評論