uni-app 进入下一页返回时焦点不能自动聚焦
uni-app 进入下一页返回时焦点不能自动聚焦
进入到当前页面可以聚焦,返回到当前页面不能自动聚焦
1 回复
在 uni-app 中处理页面返回时焦点不能自动聚焦的问题,通常可以通过在页面生命周期内管理焦点来实现。以下是一个具体的代码示例,展示了如何在页面返回时自动聚焦到指定的输入框。
假设我们有两个页面:PageA
和 PageB
。在 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>
解释
-
PageA.vue:
- 在模板中定义了一个按钮和一个输入框,输入框使用
ref
属性标记以便后续操作。 - 在
onShow
生命周期钩子中,使用this.$nextTick
确保 DOM 更新完成后尝试聚焦到输入框。this.$refs.inputA && this.$refs.inputA.focus();
这行代码检查输入框是否存在,如果存在则调用focus
方法。
- 在模板中定义了一个按钮和一个输入框,输入框使用
-
PageB.vue:
- 简单地定义了一个输入框和一个返回按钮。
- 点击返回按钮时,调用
uni.navigateBack()
方法返回上一页。
通过这种方式,当用户从 PageB
返回 PageA
时,PageA
的 onShow
生命周期钩子会被触发,进而尝试将焦点设置到指定的输入框上。这种方法利用了 uni-app 的页面生命周期管理和 DOM 操作能力,可以有效地解决返回页面时焦点不能自动聚焦的问题。