Laravel javascript 需要完美的滚动条
Posted
技术标签:
【中文标题】Laravel javascript 需要完美的滚动条【英文标题】:Laravel javascript require perfect-scrollbar 【发布时间】:2018-12-29 14:28:51 【问题描述】:我尝试要求 jquery pulgin perfect-scrollbar
到我的 laravel javascript。所以我跑了
npm install perfect-scrollbar
在我的 Javascript 文件的第 1 行(位于 ressources/assets/javascript/material-dashboard/myfile.js
下)我需要此插件
require('perfect-scrollbar');
myscript.js
需要 app.js
和 require('./material-dashboard/myscript.js')
现在浏览器控制台告诉我
Uncaught TypeError: $(...).perfectScrollbar is not a function
资产是用编译的
npm run dev
myscript.js
的内容
require('perfect-scrollbar');
(function()
isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;
if (isWindows)
// if we are on windows OS we activate the perfectScrollbar function
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
$('html').addClass('perfect-scrollbar-on');
else
$('html').addClass('perfect-scrollbar-off');
)();
怎么了?
感谢您的帮助!
【问题讨论】:
你能添加你用来初始化它的代码,即$(...).perfectScrollbar
代码吗?
内容已添加
【参考方案1】:
只是为了简化你的工作,在处理的 bootstrap.js 文件下 require('完美的滚动条'); 只需将其更改为 window.PerfectScrollbar = require('perfect-scrollbar').default; 你会很高兴的。仅在 laravel 中使用 bootstrap.js 编译资产时回答问题
【讨论】:
【参考方案2】:根据docs,要使用插件初始化元素,您应该执行以下操作:
import PerfectScrollbar from 'perfect-scrollbar';
new PerfectScrollbar(".sidebar .sidebar-wrapper");
new PerfectScrollbar(".main-panel");
如果您想使用 require
而不是 import,您可以执行以下操作:
let PerfectScrollbar = require('perfect-scrollbar').default;
最后,该插件似乎不适用于开箱即用的jQuery
,但是,如果您想像在您的帖子中一样使用jQuery
,您可以执行以下操作:
import PerfectScrollbar from 'perfect-scrollbar';
$.fn.perfectScrollbar = function (options)
return this.each((k, elm) => new PerfectScrollbar(elm, options || ));
;
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
【讨论】:
以上是关于Laravel javascript 需要完美的滚动条的主要内容,如果未能解决你的问题,请参考以下文章
css div 固定一个div 使这个div不随着网页的滚而滚动 就是把这个div固定在一个位置任何时候都在一个位置
Laravel - Bootstrap 的 JavaScript 需要 jQuery 错误