Rails 6 infinite scrolling Uncaught ReferenceError: InfiniteScroll is not defined
Rails 6 infinite scrolling Uncaught ReferenceError: InfiniteScroll is not defined
我正在向我的应用添加无限滚动功能,当滚动到页面末尾时,无限滚动库会自动获取数据并追加到页面中。
我正在使用 metafizzy 的这个库:
https://infinite-scroll.com/
Rails 6 app使用webpacker编译js文件,libs。我按以下顺序安装无限滚动:
yarn add infinite-scroll
在app/javascript/packs/application.js
中:
require("infinite-scroll");
var elem = document.querySelector(".container");
var infScroll = new InfiniteScroll(elem, {
// options
path: ".pagination__next",
append: ".post",
history: false
});
但是,在 运行 应用程序上我遇到了这个错误:
application.js:21 Uncaught ReferenceError: InfiniteScroll is not defined
at Object../app/javascript/packs/application.js (application.js:21)
at __webpack_require__ (bootstrap:19)
at Object.0 (log.js:56)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
这是一个示例项目:
https://github.com/truongnmt/rails-6-infinite-scroll-sample
使用这个
var InfiniteScroll = require('infinite-scroll');
var infScroll = new InfiniteScroll('.container', {
// options
path: ".pagination__next",
append: ".post",
history: false
});
我正在向我的应用添加无限滚动功能,当滚动到页面末尾时,无限滚动库会自动获取数据并追加到页面中。
我正在使用 metafizzy 的这个库: https://infinite-scroll.com/
Rails 6 app使用webpacker编译js文件,libs。我按以下顺序安装无限滚动:
yarn add infinite-scroll
在app/javascript/packs/application.js
中:
require("infinite-scroll");
var elem = document.querySelector(".container");
var infScroll = new InfiniteScroll(elem, {
// options
path: ".pagination__next",
append: ".post",
history: false
});
但是,在 运行 应用程序上我遇到了这个错误:
application.js:21 Uncaught ReferenceError: InfiniteScroll is not defined
at Object../app/javascript/packs/application.js (application.js:21)
at __webpack_require__ (bootstrap:19)
at Object.0 (log.js:56)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
这是一个示例项目: https://github.com/truongnmt/rails-6-infinite-scroll-sample
使用这个
var InfiniteScroll = require('infinite-scroll');
var infScroll = new InfiniteScroll('.container', {
// options
path: ".pagination__next",
append: ".post",
history: false
});