uni-app通过引入一个子组件在子组件中的input即使adjust-position设置为false还是会导致页面上推

uni-app通过引入一个子组件在子组件中的input即使adjust-position设置为false还是会导致页面上推

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

HBuilderX类型：
正式

HBuilderX版本号：
4.29

手机系统：
iOS

手机系统版本号：
iOS 18

手机厂商：
苹果

手机机型：
iphone 12

页面类型：
vue

vue版本：
vue2

打包方式：
云端

操作步骤：
uniapp通过引入的引入一个子组件，在子组件中的input即使adjust-position设置为false还是会导致页面上推，但如果不是引入子组件的方式而是直接在页面引入则不会导致页面上推，

预期结果：
要想实现引入子组件，页面也不上推，如何实现

实际结果：
引入子组件，页面上推了，即使在子组件input中设置adjust-position设置为false，仍然上推

bug描述：
uniapp通过引入的引入一个子组件，在子组件中的input即使adjust-position设置为false还是会导致页面上推，但如果不是引入子组件的方式而是直接在页面引入则不会导致页面上推，要想实现引入子组件，页面也不上推，如何实现


更多关于uni-app通过引入一个子组件在子组件中的input即使adjust-position设置为false还是会导致页面上推的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

已经解决，没有问题，是我代码写错了

更多关于uni-app通过引入一个子组件在子组件中的input即使adjust-position设置为false还是会导致页面上推的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在uni-app中常见的iOS软键盘弹起导致的布局问题。针对你的场景，建议尝试以下解决方案：

  1. 在子组件的input元素上同时设置：
<input 
  adjust-position="false" 
  :focus="false"
  @focus="handleFocus"
/>
  1. 在子组件中添加处理方法：
methods: {
  handleFocus(e) {
    // 阻止默认行为
    e.preventDefault()
    // 手动设置焦点
    this.$refs.input.focus()
  }
}
  1. 如果问题仍然存在，可以在页面级添加以下样式：
page {
  overflow: hidden;
  height: 100vh;
}
  1. 对于iOS设备，还可以尝试在manifest.json中配置：
"app-plus": {
  "softinput": {
    "mode": "adjustPan"
  }
}
回到顶部