vue项目类微信聊天页面,输入法弹出,ios的标题会整体上移问题

场景: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);
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一个基本的示例,模仿微信聊天点击聊天弹出键盘,发送后隐藏键盘: ```html <template> <div> <div class="chat-box" ref="chatBox" @click="focusInput"> <!-- 聊天内容展示区域 --> </div> <div class="chat-input-box"> <input type="text" class="chat-input" ref="chatInput" v-model="message" @keyup.enter="sendMessage"> <button class="send-btn" @click="sendMessage">发送</button> </div> </div> </template> <script> export default { data() { return { message: '' } }, methods: { focusInput() { this.$refs.chatInput.focus(); }, sendMessage() { // 发送消息的逻辑代码 console.log('发送消息:' + this.message); // 清空输入框内容 this.message = ''; // 隐藏键盘 this.$refs.chatInput.blur(); } } } </script> <style> .chat-box { height: 300px; overflow: auto; /* 其他样式 */ } .chat-input-box { display: flex; align-items: center; padding: 10px; /* 其他样式 */ } .chat-input { flex: 1; height: 30px; /* 其他样式 */ } .send-btn { margin-left: 10px; /* 其他样式 */ } </style> ``` 在上面的代码中,我们在输入框上添加了一个 `@keyup.enter` 事件,当用户按下回车键时,自动发送消息。我们还添加了一个发送按钮,当用户点击发送按钮时,也发送消息。 在发送消息的方法中,我们首先获取输入框中的内容,然后进行发送消息的逻辑操作,这里只是简单地输出了消息内容。接着,我们清空了输入框的内容,并将焦点移开,这样就可以隐藏键盘了。需要注意的是,我们使用了 `$refs` 来引用输入框,这需要在组件中添加 `ref` 属性,以便我们可以在组件中引用它。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值