移动端开发遇到的bug记录

文章讲述了在页面快速滚动时,checkbox元素消失的问题以及表单项内容在滚动时消失的状况。解决方案包括在回到顶部时先隐藏再显示checkbox以规避性能问题,以及在页面滚动时让输入框失去焦点以防止软键盘弹起导致的内容消失。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.页面快速滚动,checkbox会消失

列表存在checkbox,在点击‘回到顶部’,由于页面快速滚动,checkbox会消失,触摸一下页面或者点击页面的其他功能,使页面发生渲染变化,checkbox才会出现
(之前猜想:checkbox使用了定位,当页面快速滚动,一直在计算定位造成性能问题,所以改变样式,不使用定位,但还是出现一样的问题)

最后的解决办法:

点击‘回到顶部’时,先将checkbox隐藏,display:none, 再显示,通过隐藏显示造成页面变化,这样快速滚动时checkbox也不会突然消失
在这里插入图片描述

2.页面上下滚动,表单项部分内容会消失

当填写好表单后,上下滚动页面,或者当输入框在输入、手机软键盘弹起时,滚动页面,会出现页面某些内容会消失
原因猜想1:可能是因为页面上定位元素太多了,滚动时性能有影响;将页面上一些不必要的定位去掉后,键盘没有弹起时滚动页面情况倒是出现得没这么频繁,键盘有弹起时滚动还是有点频繁
原图猜想2:键盘引起的
解决方法:在滚动页面时,不让键盘弹起(移动端input输入框获取焦点时,键盘会自动弹起,所以要隐藏键盘,只需要使input失去焦点即可)

// 页面滚动时,退出软键盘
window.ontouchmove = function(){
      $('.weui-input').blur()
      ('.weui-textarea').blur()
}		

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值