个人日志

Good Luck To You!

记录微信小程序键盘遮挡解决方法

这段代码实现了在微信小程序中,当输入框被键盘遮挡时,自动将页面上移,以便用户能够看到输入框和键盘。


具体实现方法如下:


1. 在页面的 data 中定义一个变量 changeFixedBottom,用于控制 popup 组件的 bottom 值。


2. 在 popup 组件中,设置 adjust-position 属性为 false,这样在键盘弹起时,页面不会自动上移,而是由我们手动控制。


3. 在输入框的 bindfocus 事件中,获取键盘的高度 e.detail.height,并将 changeFixedBottom 设置为 bottom:键盘高度。


4. 在输入框的 bindblur 事件中,将 changeFixedBottom 设置为 bottom:0,这样在键盘收起时,页面会自动下移回原来的位置。


5. 在页面中重写以上内容,实现自动调整页面位置。


需要注意的是,这种方法只适用于在页面中只有一个输入框的情况,如果有多个输入框,需要分别处理每个输入框的位置。另外,这种方法对于固定在页面底部的组件无效,需要另外处理。


控制面板
您好,欢迎到访网站!
  查看权限
网站分类

赣ICP备2023006748号

Copyright Your WebSite.Some Rights Reserved.