Добавить класс в тело перед загрузкой страницы - PullRequest
Новая
       0

Добавить класс в тело перед загрузкой страницы

0 голосов
/ 25 октября 2018

Моему приложению vue необходимо определить, просматривается ли оно на настольном или мобильном устройстве.

Никаких проблем там нет.

Однако возникает «икота», когда приложение выглядит непропорционально длясекунда или две при загрузке, что недопустимо.

Как мое приложение vue может немедленно изменить тег body, чтобы страница загружалась плавно?

Спасибо

ОБНОВЛЕНИЕ:

Спасибо A.Broderick за вашу помощь - мое решение ниже

Ответы [ 3 ]

0 голосов
/ 25 октября 2018

Вы используете Vue Router?Если это так, вы можете сделать расчет, будь то ПК или мобильный телефон в функциональности маршрутизатора.Скорее всего, вы захотите поместить вычисление в функцию beforeEach () вашего маршрутизатора, или, если это всего лишь страница или две, вы можете поместить это в функцию beforeRouteEnter () на отдельных страницах.

0 голосов
/ 25 октября 2018

Спасибо А.Бродерику за помощь

Вот как это работает для меня:

  1. HTML: 

    <html>
  ....
<style>
  .noDisplay {
    display: none;
  }
</style>
  </head>
  <body class="noDisplay">
   ....
 </body>

  2. App.vue: 

      <script>
  // 3rd party
  var MobileDetect = require('mobile-detect')

  // Shell
  import DesktopShell from './components/layout/desktop/d_shell.vue'
  import MobileShell from './components/layout/mobile/m_shell.vue'

  export default {
     name: 'app',
     data() {
     return {
     windowWidth: 0,
     windowHeight: 0,
     goMobile: this.IsMobile()
     }
},
components: {
  appDesktopShell: DesktopShell,
  appMobileShell: MobileShell
},
methods: {
  IsMobile: function () {
    if (navigator.userAgent.match(/Android/i)
      || navigator.userAgent.match(/webOS/i)
      || navigator.userAgent.match(/iPhone/i)
      || navigator.userAgent.match(/iPad/i)
      || navigator.userAgent.match(/iPod/i)
      || navigator.userAgent.match(/BlackBerry/i)
      || navigator.userAgent.match(/Windows Phone/i)
    ) {
      this.goMobile = true;
      document.body.className += ' ' + 'is-mobile';
      document.querySelector('body').classList.remove('noDisplay');
      return true;
    }
    else {
      this.goMobile = false;
      document.querySelector('body').classList.remove('noDisplay');
      return false;
    }
  },
},
mounted() {
  this.$nextTick(() => {
    window.addEventListener('load', () => {
      this.windowWidth = window.outerWidth
      this.windowHeight = window.outerHeight
    });
    window.addEventListener('resize', () => {
      this.windowWidth = window.outerWidth
      this.windowHeight = window.outerHeight
    });
  })
},

    }

0 голосов
/ 25 октября 2018

Попробуйте, чтобы начальная стилизация приложения достигла display: none; Тогда есть условие, которое реагирует на то, загружается ли оно на рабочий стол или мобильный телефон?Таким образом, любой из них должен быть выбран первым на начальной пустой странице.Тем не менее, если загрузка занимает несколько секунд, возможно, возникли некоторые проблемы с тем, как структурирован код. Постарайтесь опубликовать его?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...