我正在使用 onsen.ui 框架,但是当我包含任何脚本时,他无法工作 我如何接受在框架中包含 javascript
window.console = window.console || function(t) {};
span{
color:red;
}
<html><head>
<meta charset="UTF-8">
<title>CodePen - Navigator</title>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css'>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no" >
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Simple Navigation</div>
</ons-toolbar>
<div style="text-align: center">
<br>
<button onclick="scrollWin()">Click me to scroll horizontally no work!</button><br><br>
<script>
function scrollWin() {
window.scrollTo(0, 140);
}
</script>
<span><br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test</span>
</div>
</ons-page>
</ons-navigator>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js'></script>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js'></script>
<script>
ons.bootstrap();
//# sourceURL=pen.js
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</body></html>
最佳答案
您遇到的问题不是 JavaScript 不起作用,而是您只是试图滚动错误的元素。
Onsen UI 的 ons-page
元素创建自己的内容元素 (div.page__content
) 并用于滚动目的。所以你可以滚动该元素。但是它没有方法scrollTo,您只需设置 scrollTop
和 scrollLeft
属性,如下所示:
document.querySelector('.page__content').scrollTop = 140; // for vertical
document.querySelector('.page__content').scrollLeft = 140; // for horizontal
如果您将其用于您的 scrollWin
函数,那就没问题了。
另请注意 - 如果您想使用水平滚动,您应该有一些更宽的内容,以便您可以实际滚动元素。
出于代码片段的目的,我插入了以下内容:
<div style="position:absolute;width: 200%;height: 10px;"></div>
我想你已经明白了它的要点。
最后,如果您想在温泉准备就绪时执行某些操作 - 例如,如果您想调用自动滚动功能,您可以这样做:
ons.ready(function(){ ... });
这是您修改后的代码片段:
window.console = window.console || function(t) {};
span{
color:red;
}
<html><head>
<meta charset="UTF-8">
<title>CodePen - Navigator</title>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css'>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no" >
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Simple Navigation</div>
</ons-toolbar>
<div style="text-align: center">
<br>
<button onclick="scrollWin()">Click me to scroll horizontally no work!</button><br><br>
<script>
function scrollWin() {
document.querySelector('.page__content').scrollTop = 140; // for vertical
document.querySelector('.page__content').scrollLeft = 140; // for horizontal
}
</script>
<div style="position:absolute;width: 200%;height: 10px;"></div>
<span><br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test</span>
</div>
</ons-page>
</ons-navigator>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js'></script>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js'></script>
<script>
ons.bootstrap();
//# sourceURL=pen.js
</script>
</body></html>
关于javascript - 外部 javascript 不适用于 onsen 框架,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39638415/