uniapp 小程序input 二次聚焦问题

2,541 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路 最近在做的一个项目,有个需求是这样的,就是一打开页面就直接聚焦到input框上,同时页面上也有一个按钮,当点击按钮时,就会重新请求数据,同时input框也要再次聚焦到input框上。 image.png

这个问题一直困扰了我很久,因为我用的是uniapp 开发的微信小程序,之前想用ref这个属性的,但一不小心就掉到坑里去了,因为uniapp如果是在view上加ref不行的,用this.$refs是拿不值的,因为uniapp 小程序端仅支持对自定义组件使用ref。所以只能换了另一种思路,经过一番查找资料。终于成功了

先看代码,

image.png 标签上要加:focus="focus"

image.png data 里初始数据要先让focus为false

image.png onShow 时让focus为true 这样的话,打开页面时就可以让input框聚焦了,然后很多人认为如果再次聚焦时,只需在函数里再次赋值focus为true就可以了,但我试了很多次都不行的,经过一番查找资料才发现,原来如果再次聚焦input框时,一定要先让focus为false,如果你本来focus为true,你再次赋值为true是不行的,不起作用的。

image.png 我在点击“下一个”按钮时的方法里,先让focus为false,然后在再次请求数据返回时,再让focus为true,这样就可以了

image.png

最后的郊果就是这样 304200d32f1b22d05db5b29ec48a603.jpg

总结:总的来说就是先让focus为false再次让focus为true。有时就是缺了关键的一步。只要肯花时间查找各种资料,结合自己的情况,大部分的问题都可以解决的,加油吧,少年!