本文已参与「新人创作礼」活动,一起开启掘金创作之路
最近在做的一个项目,有个需求是这样的,就是一打开页面就直接聚焦到input框上,同时页面上也有一个按钮,当点击按钮时,就会重新请求数据,同时input框也要再次聚焦到input框上。
这个问题一直困扰了我很久,因为我用的是uniapp 开发的微信小程序,之前想用ref这个属性的,但一不小心就掉到坑里去了,因为uniapp如果是在view上加ref不行的,用this.$refs是拿不值的,因为uniapp 小程序端仅支持对自定义组件使用ref。所以只能换了另一种思路,经过一番查找资料。终于成功了
先看代码,
标签上要加:focus="focus"
data 里初始数据要先让focus为false
onShow 时让focus为true 这样的话,打开页面时就可以让input框聚焦了,然后很多人认为如果再次聚焦时,只需在函数里再次赋值focus为true就可以了,但我试了很多次都不行的,经过一番查找资料才发现,原来如果再次聚焦input框时,一定要先让focus为false,如果你本来focus为true,你再次赋值为true是不行的,不起作用的。
我在点击“下一个”按钮时的方法里,先让focus为false,然后在再次请求数据返回时,再让focus为true,这样就可以了
最后的郊果就是这样
总结:总的来说就是先让focus为false再次让focus为true。有时就是缺了关键的一步。只要肯花时间查找各种资料,结合自己的情况,大部分的问题都可以解决的,加油吧,少年!