微信小程序如何调取键盘-ag九游会j9官方网站

ag九游会j9官方网站-j9九游会登录入口首页新版

ag九游会j9官方网站-j9九游会登录入口首页新版 api j9九游会登录入口首页新版的解决方案学堂社区

控制台注册

微信小程序如何调取键盘

christopher

2023-06-20

182 浏览

江海入海，知识涌动，这是我参与江海计划的第2篇。

在小程序中，我们经常有调起键盘的操作场景，但是在不同的场景下j9九游会登录入口首页新版的解决方案不尽相同，还是需要具体问题具体分析。

1、需求分析

最近在项目中有一个需求，是从列表页点击评论按钮进入详情页时，在加载完页面后自动调起键盘进入评论状态。从需求来

看，我们应该在

onready

函数中调起键盘，因为

onready

函数是在页面初次渲染完成时被调用。但是在实践中我们发现，对于

一些配置不好的手机，其加载页面速度较慢，在

onready

函数调用时页面并没有渲染完毕，就会导致

placeholder

和

input

组件

位置错乱的现象。其本质原因是，

onready

生命周期函数并不能在调用时承若已经将页面渲染完成了。（尽管文档中描述是已

经完成了。）

之前的操作是在

onready

生命周期函数中调起键盘。

this.setdata({ focus: true })

发现这个问题后做了相应的延迟处理

settimeout(() => {

this.setdata({ focus: true })

}, 300)

但这是治标不治本的方法，手机性能好的用户会无谓的等待

300

毫秒，而手机性能很差的用户等待

300

毫秒也不一定就能解决

这个问题。

2、解决思路

那么既然小程序并没有提供给我们一个理想的渲染结束后的回调函数，那么我们就换个思路：

使用短轮询来处理，当页面渲

染完成后才调起键盘的操作。

既然要使用短轮询，那么我们去轮询什么呢？什么标志代表着页面渲染完成了呢？在这里，我是使用

wx.createselectorquery()

方

法，它会返回一个

selectorquery

对象实例，在这个实例上调用

select

方法选择我想要去轮询的节点，在回调函数中判断参数是

否为

null

。如果返回了监控的节点信息，那么说明已经渲染完成。这时就可以进行键盘调起操作了。

let timer = setinterval(() => {

wx.createselectorquery().select('#comment-section').boundingclientrect(rect => {

if (rect !== null && timer !== null) {

clearinterval(timer)

timer = null

this.setdata({ focus: true })

}

}).exec()

}, 50)

在此之上，如果我们只粗暴的让

focus

为

true

并不是个明智的做法。

在调起键盘时默认页面会上推，如果在评论很少的情况下这样的体验并不好。所以需要判断一个高度，超过这个值就上推，没

超过就不上推。这个值视实际情况而定。上推的操作是由

input

组件的

adjust-position

属性决定，为

true

则上推，否则则不上推。

这时回调返回的参数中的节点信息就可以派上用场了。

在

this.setdata({ focus: true })

前对节点高度进行判断

if (rect.height < 500) this.setdata({ push: false })

else this.setdata({ push: true })

3、函数问题

在实际的操作中，我们发现在键盘被调起后会有概又自动收回。经过排查发现时

o nblur

函数的问题，在

o nblur

函数中，我们手

动的设置

focus

为

false

，但其实并不需要这一步操作，反而带来了副作用。在我们去除了这部分代码后，键盘自动收起的问题

得到了解决。

请后发表内容

1个评论

旺仔米苏

2023-08-31

可以的

赞同 0

打赏

christopher

文章 33 点赞 0

微信小程序如何调取键盘-ag九游会j9官方网站

相关文章

热门文章

热门问答