[小程序] 关于小程序弹起键盘后导致页面上移的问题

553 阅读1分钟

问题

在构建小程序时,遇到了一个功能需求。 在点击某个按钮后,在小程序页面需要弹起用户手机的虚拟键盘,用来获取用户输入的内容

不过在实际的构建过程中发现一个问题,页面上使用的是Uniapp的easyinput内置组件,在点击easyinput后,页面出现虚拟键盘,在h5的模式下并未出现问题,在微信小程序下页面出现上移的情况,但并未出现其他过于影响功能的问题,在支付宝小程序中页面出现上移情况,并且在用户点击使得easyinput失去焦点后页面布局出现异常(在我这里主要体现的是页面上移,并且滚动到页面最顶部)

解决

1、easyinput 基于小程序的input 组件,对小程序input进行增强

2、easyinput(uniapp uni-扩展) 可以设置微信小程序在调起用户键盘时不挤压页面布局(adjust-position),而不能设置支付宝小程序调起用户键盘避免影响布局(微信小程序 input)

3、使用小程序原生textarea, 小程序中adjust-position解决页面上移问题, 支付宝中使用enableNative解决页面上移问题(支付宝小程序 textarea)