无限加载列表与搜索框结合的bug

此bug的产生是基本vant框架下,使用van-list构建长列表并且在长列表当中存在搜索功能的页面,而搜索页面是另外一个组件而形成的

 vant当中的van-list无限加载列表在实际运用中,html结构构成原则为,外部overflow:hidden,内部形成滚动区域即可,具体样式自行思考,如果是在vue-cli项目中使用,列表内容是动态加载的情况下,在组件的mounted生命周期内,需要手动计算滚动区域的高度,一般情况下,通过'document.documentElement.clientHeight - this.$refs.无限加载区域最外层.getBoundingClientRect().top-需要除去的头尾高度'这个算式,99%的,不能渲染无限列表的bug基本都能解决。

抛砖引玉,在项目中如果有些长列表,当中需要使用到搜索栏,需要调用软键盘的这种需求,基本都会碰到一个问题,(这个项目特指 web项目,非混合式app,即纯h5项目),在安卓手机上,尤其是在微信浏览器端,当软键盘弹出之后,页面整体会向上移, 导致长列表有部分会被挡住,如图

重新刷新页面之后,正常展示,针对这种情况,有如下两种解决方案:

 其一:如果有用到jquery,那就监听input失焦事件,执行$(window).scroll(0, 0),这个方法来自百度,未验证

其二:这种方法简单粗暴有效快捷,setTimeout,延时处理搜索事件,一般安卓键盘在弹起后收回基本都是在1s以内,一般延时超过300ms即可,但华为手机有些特别,最好可以针对华为手机设置稍长一些,然后,针对这个延时操作,在用户体验这一块得下点功夫

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值