解决uni |
您所在的位置：网站首页 › 微信聊天页面自动往上跳怎么回事 › 解决uni |
解决uni
|
解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移 问题
转发自https://www.cnblogs.com/XHappyness/p/13528236.html#4703250 存在问题 做了一个记录页面（类似单方聊天页），输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见 需要实现效果： 比如一个记录页面，需要在键盘弹出时： 底部的输入框跟随键盘上弹页面头固定在顶部不动聊天信息区域（即内容区）调整高度，该区域局部滚动
解决方法 底部输入框fixed定位在底部，使用输入框的@focus获取键盘高度，更改输入框bottom；@blur时恢复bottom=0；使用包含页面头和内容区 container的padding-bottom设置为输入框高度+输入框bottom，避免被输入框和键盘遮挡；并设置为flex column布局头部定高（如果不定高可以不设置）；内容区设flex-grow：1，overflow-y:auto; 使其自适应高度并实现滚动；实现代码 |
【本文地址】
今日新闻 |
推荐新闻 |