uni-app uni-popup中uni-easyinput第二次聚焦时会推动页面滚动

uni-app uni-popup中uni-easyinput第二次聚焦时会推动页面滚动

操作步骤：

  • 点击评论，弹出popup,input设置的自动聚焦。点击popup背景区域关闭popup，再次点击评论，popup弹出并自动聚焦

预期结果：

  • 底部页面保持当前位置

实际结果：

  • 页面被向上推动了一段距离

bug描述：

首次打开popup并让input聚焦页面状态正常。 但是关闭popup后，再次打开popup并让input聚焦页面会向上推送，已配置

"app-plus":{  
        "softinputMode": "adjustResize"  
}

有什么禁止滚动的方法可以参考 uni-popup 并不能完全阻止页面滚动，可在打开 uni-popup 的时候手动去做一些处理，禁止页面滚动 代码视频见附件

附件：

开发环境 版本号 项目创建方式
Windows 10 HBuilderX
Android 11
小米 miui12.5.21.11.3开发版
HBuilderX 3.2.16
Vue vue2

更多关于uni-app uni-popup中uni-easyinput第二次聚焦时会推动页面滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

看subNvue的时候受到了这个插件的启发，倒是可以通过一个页面的方式进行处理。全局弹窗示例

更多关于uni-app uni-popup中uni-easyinput第二次聚焦时会推动页面滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app软键盘交互问题。在Android平台上，当adjustResize模式下多次触发输入框聚焦时，系统可能会错误计算滚动位置。

解决方案：

  1. 临时禁止页面滚动（推荐）：
// 打开popup时
onPopupOpen() {
  // 禁止页面滚动
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 0
  });
  // 或设置页面overflow
  const pages = getCurrentPages();
  const page = pages[pages.length - 1];
  page.$el.style.overflow = 'hidden';
}

// 关闭popup时恢复
onPopupClose() {
  const pages = getCurrentPages();
  const page = pages[pages.length - 1];
  page.$el.style.overflow = '';
}
  1. 使用adjustPan模式替代：
"app-plus": {
  "softinputMode": "adjustPan"
}

注意：adjustPan模式下页面不会自动调整，可能遮挡输入框。

  1. 手动控制滚动位置： 在input聚焦后，通过uni.pageScrollTo将页面滚动回原位置：
onFocus() {
  setTimeout(() => {
    uni.pageScrollTo({
      scrollTop: this.originalScrollTop,
      duration: 0
    });
  }, 100);
}
回到顶部