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

时间:2024-04-05 09:21:23

此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项目),在安卓手机上,尤其是在微信浏览器端,当软键盘弹出之后,页面整体会向上移, 导致长列表有部分会被挡住,如图

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

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

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

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