记录一次移动端和pc端适配异同

最新推荐文章于 2025-12-29 10:47:54 发布

原创最新推荐文章于 2025-12-29 10:47:54 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js #html #开发语言

HTML 同时被 3 个专栏收录

3 篇文章

订阅专栏

javascript

1 篇文章

订阅专栏

日常开发

1 篇文章

订阅专栏

文章讲述了如何通过监听滚动事件解决移动端触底加载问题，原生判断条件在不同设备上表现不稳定。作者调整了移动端的判断条件（clientHeight+scrollTop>scrollHeight*0.95），确保在各种机型上实现稳定的数据加载。

通过监听滚动事件，实现触底加载功能；

1.最开始的判断触底条件是这样的：clientHeight + scrollTop >= scrollHeight，但是这种情况在不同的移动端效果各不同，例如：小米11ultra触底不加载，小米11触底加载一次后便不加载；

2.后面对移动端和pc端分别进行了判断

if(window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
 // 移动端
} else {
 // pc
}

3.我怀疑移动端机型各异，可能并没有触底，所以无法进行数据加载，我便将移动端加载的判断条件改为clientHeight + scrollTop >= scrollHeight * 0.95，如此测试的机型全部正常加载数据；

4.监听滚动事件，实现触底加载功能完整代码如下：

   window.addEventListener('scroll', function () {
          event.preventDefault()
          let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
          let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
          if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
            // 移动端
            if (clientHeight + scrollTop >= scrollHeight * 0.95) {
              onBottom();
            }
          } else {
            // pc
            if (clientHeight + scrollTop >= scrollHeight) {
              onBottom();
            }
          }

        }, { passive: false });