详解小程序输入框闪烁及重影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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
Three.js基础学习教程
Nov 16 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
js判断鼠标移入移出方向的方法
Jun 24 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
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
Python3基础之输入和输出实例分析
2014/08/18 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
基于python实现计算两组数据P值
2020/07/10 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
数控专业推荐信范文
2013/12/02 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
安全生产承诺书
2014/03/26 职场文书
任命书范本大全
2014/06/06 职场文书
毕业生学校组织意见
2015/06/04 职场文书
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL