微信小程序scrollview软键盘加载会出现滚动条放下会调

微信小程序scrollview软键盘加载会出现滚动条放下会调,第1张

1、将scroll-view的scroll-y属性设置为false,这样可以禁用scroll-view的纵向滑动功能,避免滑动条出现。

2、在input组件绑定focus和blur事件,当input组件被聚焦时,将scroll-view组件滚动到输入框所在的位置,当input组件失去聚焦时,将scroll-top值设置为0,这样可以让页面回到最顶部。

其实很简单,是由input的type属性控制的

type属性控制数字键盘的三种状态

    1number:数字键盘(无小数点)

    2digit:数字键盘(有小数点)

    3idcard:数字键盘(无小数点、有 x 键)

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

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

如图所示:

当遇到这样的场景:

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

就会出现问题:

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

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

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

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

注意

wxpageScrollTo 仅在 page 组件中有效,component 中无效!

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

2、如何滚动?

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

原文地址: http://outofmemory.cn/zz/10134860.html

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

发表评论

登录后才能评论

评论列表(0条)

保存