详解小程序输入框闪烁及重影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中encodeURI和decodeURI方法使用介绍
May 06 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
关于使用js算总价的问题
Jun 23 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
js实现浏览器打印功能的示例代码
Jul 15 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
用libtemplate实现静态网页生成
2006/10/09 PHP
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
node.js中的console用法总结
2014/12/15 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
js实现点击烟花特效
2020/10/14 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
Python循环语句之break与continue的用法
2015/10/14 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
业务代表的岗位职责
2013/11/16 职场文书
怎样客观的做好自我评价
2013/12/28 职场文书
班长演讲稿范文
2014/04/24 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫