详解小程序输入框闪烁及重影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 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 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
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
python的Jenkins接口调用方式
2020/05/12 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
python文件读取失败怎么处理
2020/06/23 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
设计师个人求职信范文
2014/02/02 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers