react、jquery、gatsby - 如何让 jquery 插件在 gatsby 中工作?

IT技术 jquery reactjs webpack gatsby wow.js
2021-05-01 21:41:52

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

我从新的 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 插件代码。

1个回答

您所定义WOWlayout.js,并试图使用它main.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.jsindex.js导入)👇

编辑 gatsby-starter-default