adjust-position false在uni-app ios 键盘弹起后整个webview会有滚动条
adjust-position false在uni-app ios 键盘弹起后整个webview会有滚动条
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Mac | 15.3.2 (24D81) | HBuilderX |
产品分类:uniapp/App
PC开发环境操作系统:Mac
HBuilderX类型:Alpha
HBuilderX版本号:4.54
手机系统:iOS
手机系统版本号:iOS 18
手机厂商:苹果
手机机型:iphone 16
页面类型:vue
vue版本:vue3
打包方式:云端
示例代码:
<view class="h-screen flex flex-col">
<view class="flex-1 min-h-0">
</view>
<input :adjust-postion="false"/>
</view>
操作步骤:
点击输入框对焦。
预期结果:
输入框被遮挡,页面无法滚动
实际结果:
输入框被遮挡,但是页面可以滚动,最底部是输入框
bug描述:
页面一个聊天页,输入框在底部,当给输入框adjust-position
为false
时,IOS APP键盘弹出后会出现webview级的滚动,滚动到底部就能看到底部的输入框。
我的页面是设置的100%高度的flex布局,页面本身应该不会有滚动条的。
在微信小程序端,如果设置了adjust-position
为false
,效果就是正常的,键盘弹出不会对页面布局有任何影响。这样就可以监听键盘高度自己实现输入框的弹出。
麻烦大佬帮忙看下要怎么解决这个问题。不然聊天这种业务场景体验会很差。
为什么不用 “softinputMode”: “adjustResize”,
adjustResize
可以实现效果,但是这种模式下,等键盘完全弹出webview的大小才变化,输入框会一开始不动被遮挡,然后等键盘动画完全结束后再闪现出来,体验比较差。其实官方可以优化这个弹出逻辑,但是确实没有实现。
歪打正着
在调试过程中,不知道uniapp的bug还是设计如此。如果设置
"softinputMode": "adjustResize"
并且设置任意一个subnview
subNVues: [
{
// 仅作为触发 adjustResize 效果用,不会显示
id: 'navigation-bar',
path: 'app-plus/subNvue/navigation-bar/index',
style:{
position:'absolute',
width:'1px',
height:'1px',
// 最好设置为0
top:'0px',
left:'0px',
}
},
]
这样就能实现和小程序端一样的效果。但官方文档上没说明,感觉这个应该是BUG,不稳定,也许哪天就被修复了。
更多关于adjust-position false在uni-app ios 键盘弹起后整个webview会有滚动条的实战教程也可以访问 https://www.itying.com/category-93-b0.html