uni-app 进入下一页返回时焦点不能自动聚焦

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app 进入下一页返回时焦点不能自动聚焦

进入到当前页面可以聚焦,返回到当前页面不能自动聚焦

1 回复

在 uni-app 中处理页面返回时焦点不能自动聚焦的问题,通常可以通过在页面生命周期内管理焦点来实现。以下是一个具体的代码示例,展示了如何在页面返回时自动聚焦到指定的输入框。

假设我们有两个页面:PageAPageB。在 PageA 中有一个按钮,点击后跳转到 PageB。在 PageB 中有一个输入框,我们希望当用户从 PageB 返回 PageA 时,如果 PageA 中有输入框,能够自动聚焦。

PageA.vue

<template>
  <view>
    <button @click="navigateToPageB">Go to Page B</button>
    <input ref="inputA" type="text" placeholder="Focus me when return"/>
  </view>
</template>

<script>
export default {
  onShow() {
    // 页面显示时尝试聚焦到输入框
    this.$nextTick(() => {
      this.$refs.inputA && this.$refs.inputA.focus();
    });
  },
  methods: {
    navigateToPageB() {
      uni.navigateTo({
        url: '/pages/PageB/PageB'
      });
    }
  }
}
</script>

PageB.vue

<template>
  <view>
    <input ref="inputB" type="text" placeholder="Page B Input"/>
    <button @click="goBack">Go Back</button>
  </view>
</template>

<script>
export default {
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

解释

  1. PageA.vue

    • 在模板中定义了一个按钮和一个输入框,输入框使用 ref 属性标记以便后续操作。
    • onShow 生命周期钩子中,使用 this.$nextTick 确保 DOM 更新完成后尝试聚焦到输入框。this.$refs.inputA && this.$refs.inputA.focus(); 这行代码检查输入框是否存在,如果存在则调用 focus 方法。
  2. PageB.vue

    • 简单地定义了一个输入框和一个返回按钮。
    • 点击返回按钮时,调用 uni.navigateBack() 方法返回上一页。

通过这种方式,当用户从 PageB 返回 PageA 时,PageAonShow 生命周期钩子会被触发,进而尝试将焦点设置到指定的输入框上。这种方法利用了 uni-app 的页面生命周期管理和 DOM 操作能力,可以有效地解决返回页面时焦点不能自动聚焦的问题。

回到顶部