textarea微信小程序调起键盘的时候遮挡,有解决办法吗

textarea微信小程序调起键盘的时候遮挡,有解决办法吗,第1张

可以设置个padding-bottom: 450rpx

就可塌缓以避免这个问题,然后通过焦点或者键盘状态动态来控制这个padding,键盘拉起就是450rpx,键盘隐藏再设置成0,或者直接450rpx就行。

微信小程序

微信小程序,简称小程序,缩写xcx,英文mini program。是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。

应用团简模将无处不在,随时可用,但又无需安装卸载。

微信小程序于2017年1月9日凌晨正式上线。张小龙随后咐散在朋友圈发出一条写着“2017.1.9”的状态,同时配有 iPhone 一代的新品发布图。张小龙以这样的形式,向乔布斯致敬。

本文为实际工禅基哪作简记,粗陋小笔记一篇,仅供参考。

小程序填写表单的过程中,手机键盘调起,默认情况,键盘顶部会紧贴着表单项。

如图所示:

当遇到这样的场景:

表单项输入的内容,作为关键字,向后台请求匹配数据列表。拿到数据后,在表单项下方展示列表数据,供用户点选。

就会出现问题:

展示在 input 下面的列表,会被键盘完全挡住贺码。

1、获取焦点时,使用 input 组件的 cursor-spacing 属性,设置键盘和 input 组件的间距。

2、失去焦点时,计算页面已经向上滚动的距离,加上列表项的锋冲高度,手动将整个页面向上推,防止处于页面底部的 input  失去焦点时、又掉回页面底部。影响用户体验。

手动将整个页面向上推的方式:

【注意】

wx.pageScrollTo 仅在 page 组件中有效,component 中无效!

1、在当前 input 获取焦点的时候,手动将页面向上、滚动 列表高度 那么大的距离。

2、如何滚动?

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/8230461.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-14
下一篇 2023-04-14

发表评论

登录后才能评论

评论列表(0条)

保存