解决显示loading导致页面闪烁问题

导致页面闪烁的原因：

1. 因为显示Loading前，页面存在滚动条（即页面内容超出一屏）；
2. 当Loading显示时，参数lock为true（即锁定屏幕的滚动），会在body上添加CSS属性 overflow: hidden,导致滚动条消失；
3. 当Loading关闭时，删作body上的overflow:hidden属情，导致滚动条出现
4. 所以让人感觉页面在闪烁

会导致页面闪铄的代码：

import { Loading } from 'element-ui
const loading = Loading.service({
    lock: true,
    text: '拼命加载中',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
});

setTimeout(() => {
    loading.close()
}, 5000)

解决方案：

1. 将Loading的lock参数改为 false,即显示Loading时不锁定屏幕
2. 添加disabledScroll、enableScroll函数，
   • 当显示Loading时记录当前的滚动条位置，并监听页面的scroll事件（当页面时，重新滚动至原来的位置）
   • 当关闭Loading时，清除记录的滚动条位置， 并移除事件监听

Tips：不足的地方是，在显示Loading时滚动页面，会有滚动条抖动的效果

解决后的代码

import { Loading } from 'element-ui
const windowScroll = (function () {
  var winX = null;
  var winY = null;

  const onScroll = () => {
    if (winX !== null && winY !== null) {
      window.scrollTo({ left: winX, top: winY, behavior: 'instant' })
    }
  }
  return {
    disableScroll() {
      winX = window.scrollX;
      winY = window.scrollY;
      window.addEventListener('scroll', onScroll);
    },
    enableScroll() {
      winX = null;
      winY = null;
      window.removeEventListener('scroll', onScroll)
    }
  }
})()


windowScroll.disableScroll()
const loading = Loading.service({
    lock: false,
    text: '拼命加载中',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
});

setTimeout(() => {
    windowScroll.enableScroll()
    loading.close()
}, 5000)

查看完整代码