3

删除了之前的描述，因为它现在不相关。

我从新的 gatsby 网站开始，能够使 jquery、bootstrap、wow 和 owl 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 动画只执行一次。即使我刷新页面也无法再次运行它。owl carousel 也有同样的问题。它出现一次，然后即使在页面刷新时也不会出现。我如何让jquery代码main.js一直在工作？由于实际文件有 1000 行 jquery 和 jquery 插件代码。

4

1 回答 1

1

您正在定义并尝试WOW在. 这行不通。layout.jsmain.js

有两种可能的解决方案：

1）添加import WOW from "wowjs"到main.js，使其在范围内可用main.js（仅当main.js被 webpack 捆绑时才有效）。对我来说WOW也可以在WOW.WOW变量中使用（控制台并相应地检查）。

2）自己附加WOW到窗口layout.js并在任何地方使用它。这可能很糟糕。

更新：

WOW在导入之前自行附加到窗口main.js并在任何地方使用它。

解决方案在这里（检查expose-wow.js和index.js导入）

编辑 gatsby-starter-default

于 2019-01-21T14:21:28.130 回答