详解小程序输入框闪烁及重影BUG解决方案


Posted in Javascript onAugust 31, 2018

前言

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

问题描述

在小程序input组件中,如果使用v-model进行双向绑定,在输入时会出现光标闪烁的BUG。

原因

造成这个BUG的原因,是因为在原生小程序input组件上,进行了封装。才导致光标闪烁的问题。

解决方案

这里提供了两种解决方案。各有各的优势,请选取合适的方案:

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

适用于input组件单纯是用户手动输入的,而没有像授权获取手机号,然后自动填入input组件中。这种需要赋予初始value的情况。即适用于单向绑定,而不是双向绑定。

/** 
* 父组件
*/

// html
<childInput @input="onInput"/> <-- 注意这里不能使用:value=value赋予初始值,否则又会出现闪烁的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:''
 }
 }
}

问题描述:输入框文字出现重影,如下

详解小程序输入框闪烁及重影BUG解决方案

输入框 在失去焦点和获得焦点的切换过程中,能清晰的看到输入框的问题的重影现象,如上图,经过一番折腾,我找到bug的出错原因即初步解决方案,仅供参考

1、微信官方设计文档给出了字体大小的规范,最小11pt,我自己设的是10pt,将其改成11pt之后,部分输入框不再出现重影,而是微信官方渲染的加粗效果

微信官方字体规范如下:

详解小程序输入框闪烁及重影BUG解决方案

修改后的加粗效果如下:

详解小程序输入框闪烁及重影BUG解决方案

3、还有的输入框扔会出现重影,细看,再继续研究,发现是因为,flex布局,使得,输入框的长度不一致,我把输入框调成一样宽度就可以,不过我也不知道具体为什么,你们可以试试

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 浮动广告实现代码
Dec 25 Javascript
img标签中onerror用法
Aug 13 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 #Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 #Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 #Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 #Javascript
vue-router动态设置页面title的实例讲解
Aug 30 #Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 #Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 #Javascript
You might like
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
event.srcElement+表格应用
2006/08/29 Javascript
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中类型关系和继承关系实例详解
2015/05/25 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Python实现上下文管理器的方法
2020/08/07 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
毕业设计计划书
2014/01/09 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
严以用权学习心得体会
2016/01/12 职场文书
浅谈Python协程asyncio
2021/06/20 Python
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python