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-positionfalse时,IOS APP键盘弹出后会出现webview级的滚动,滚动到底部就能看到底部的输入框。 我的页面是设置的100%高度的flex布局,页面本身应该不会有滚动条的。

在微信小程序端,如果设置了adjust-positionfalse,效果就是正常的,键盘弹出不会对页面布局有任何影响。这样就可以监听键盘高度自己实现输入框的弹出。 麻烦大佬帮忙看下要怎么解决这个问题。不然聊天这种业务场景体验会很差。

为什么不用 “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

回到顶部