реагировать, jquery, gatsby - как заставить работать плагины jquery в gatsby? - PullRequest
Новая
       23

реагировать, jquery, gatsby - как заставить работать плагины jquery в gatsby?

0 голосов
/ 18 января 2019

Удалено предыдущее описание, так как оно неактуально.

Я начал со свежего сайта gatsby и смог заставить работать jquery, bootstrap, wow и owouse carousel.

layout.js

import './expose'
import './main'

expose.js

import 'popper.js'
import 'bootstrap'
import 'animate.css/animate.min.css'
import WOW from 'wowjs/dist/wow.js';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';

new WOW(
    {
        offset: 100,
        mobile: true,
      }
).init();

main.js

;(function($){
    console.log('hello jquery')
    console.log($(window).width())

    /*-------------------------------------------------------------------------------
      Navbar 
    -------------------------------------------------------------------------------*/

    //* Navbar Fixed  
    function navbarFixed(){
        if ( $('.header_area').length ){ 
            $(window).scroll(function() {
                var scroll = $(window).scrollTop();   
                if (scroll){
                    $(".header_area").addClass("navbar_fixed");
                } else {
                    $(".header_area").removeClass("navbar_fixed");
                }
            });
        };
    };
    navbarFixed();

    var $animation_elements = $('.scroll_animation');
    var $window = $(window);

    function check_if_in_view() {
        console.log('check_if_in_view')
      var window_height = $window.height();
      var window_top_position = $window.scrollTop();
      var window_bottom_position = (window_top_position + window_height);

      $.each($animation_elements, function() {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = (element_top_position + element_height);

        //check to see if this current container is within viewport
        if ((element_bottom_position >= window_top_position) &&
          (element_top_position <= window_bottom_position)) {
          $element.addClass('in-view');
        } else {
          $element.removeClass('in-view');
        }
      });
    }


    if($(window).width() > 576){
        $window.on('scroll resize', check_if_in_view);
        $window.trigger('scroll');
    }

    $('.owl-carousel').owlCarousel();

})(window.jQuery)

jquery иногда работают, иногда нет.

Теперь проблема в том, что анимация wowjs выполняется только один раз.Невозможно запустить его снова, даже если я обновлю страницу.Карусель совы имеет ту же проблему.Он появляется один раз, а затем никогда не появляется, даже при обновлении страницы.Как заставить код jquery в main.js работать постоянно?Поскольку сам файл содержит 1000 строк кода плагина jquery и jquery.

1 Ответ

0 голосов
/ 21 января 2019

Вы определяете WOW в layout.js и пытаетесь использовать его в main.js. Это не сработает.

Существует два возможных решения:

1) Добавьте import WOW from "wowjs" к main.js, чтобы он был доступен в области действия main.js (работает только в том случае, если main.js объединяется через веб-пакет). Также для меня WOW доступно в переменной WOW.WOW (консоль и проверьте соответственно).

2) Прикрепите WOW к окну самостоятельно в layout.js и используйте его где угодно. Это, вероятно, плохо.

Обновление:

Прикрепите WOW к окну самостоятельно перед импортом main.js и используйте его где угодно.

Решение здесь (отметьте expose-wow.js и index.js import) ?

Edit gatsby-starter-default

...