详解小程序输入框闪烁及重影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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
PHP面向对象精要总结
2014/11/07 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
基于jquery的气泡提示效果
2010/05/31 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
倡议书格式范文
2014/04/14 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
重阳节标语大全
2014/10/07 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书