场景:vue项目类微信聊天页面等,有输入框可以唤起输入法弹出
问题:ios移动端,当输入法弹出,整体页面会上移,导致标题等元素上移出视图窗口
解决方案:
ios的壳改代码,通过监听键盘事件,然后再让其窗口向下滚动到底部。
1:监听键盘
2:键盘弹出-窗口向下滚动到底部
// 监听键盘
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShowAction:) name:UIKeyboardWillShowNotification object:nil];
/**
* 键盘即将弹出
*/
- (void)keyboardWillShowAction:(NSNotification *)note{
CGRect keyboardF = [note.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];
CGFloat duration = [note.userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
NSLog(@"高度 ===%f",keyboardF.size.height);
NSDictionary *dic = @{
@"keyboardHeight":[NSString stringWithFormat:@"%f",keyboardF.size.height],
@"keyboardTime":[NSString stringWithFormat:@"%f",duration],
};
NSString *jsStr = [NSString stringWithFormat:@"%@('%@')",@"showKeyboardHeight",[self.interactive convertToJsonData:dic]];
[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"%@----%@",result, error);
}];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
NSLog(@"scrollView ==%@",scrollView);
//解决H5聊天界面 底部输入框 点击后键盘弹出 界面上移问题
scrollView.contentOffset = CGPointMake(0, 0);
}