uni-app input 失去焦点后 滚动到页面顶部

uni-app input 失去焦点后 滚动到页面顶部

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

操作步骤：

iOSAPP页面多个输入框的情况下,点击第一个输入框弹出键盘后,滑动页面到底部,然后点击收起键盘输入框失去焦点后,页面回滚到顶部

预期结果：

iOSAPP页面多个输入框的情况下,点击第一个输入框弹出键盘后,滑动页面到底部,然后点击收起键盘输入框失去焦点后,页面回滚到顶部

实际结果：

iOSAPP页面多个输入框的情况下,点击第一个输入框弹出键盘后,滑动页面到底部,然后点击收起键盘输入框失去焦点后,页面回滚到顶部

bug描述：

iOSAPP页面多个输入框的情况下,点击第一个输入框弹出键盘后,滑动页面到底部,然后点击收起键盘输入框失去焦点后,页面回滚到顶部


更多关于uni-app input 失去焦点后 滚动到页面顶部的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

用示例代码hello uni-app能出现你的问题吗？ 不能的话你需要排查出来具体你哪个页面，甚至哪一行导致的。 找出来具体原因后提供一个能复现你描述的bug的最小化demo，让我们及时定位问题，及时修复。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app input 失去焦点后 滚动到页面顶部的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的 iOS 软键盘交互问题，在 uni-app 中确实常见。根本原因是 iOS 系统在输入框失焦后，会自动将页面滚动到初始位置。

解决方案：

  1. 监听页面滚动
    在 onPageScroll 中记录当前滚动位置，并在输入框失焦时恢复该位置。

    export default {
  data() {
    return {
      scrollTop: 0
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  methods: {
    handleBlur() {
      // 失焦后恢复滚动位置
      uni.pageScrollTo({
        scrollTop: this.scrollTop,
        duration: 0
      })
    }
  }
}

  2. 使用 scroll-view 替代页面滚动
    将页面内容包裹在 scroll-view 中，通过其内部滚动避免页面整体滚动。

    <scroll-view scroll-y="true" :style="{height: '100vh'}">
  <!-- 页面内容 -->
  <input @blur="handleBlur" />
</scroll-view>

  3. 调整输入框失焦时机
    在失焦时添加短暂延迟，确保滚动恢复在系统默认行为之后执行。

    handleBlur() {
  setTimeout(() => {
    uni.pageScrollTo({
      scrollTop: this.scrollTop,
      duration: 0
    })
  }, 100)
}
回到顶部