javascript - 外部 javascript 不适用于 onsen 框架

标签 javascript html onsen-ui

我正在使用 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,您只需设置 scrollTopscrollLeft 属性,如下所示:

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/

相关文章:

javascript - 如何制作一个可以改变文档背景颜色的按钮?

javascript - 数据库事务的 promise 正在解决,但之后的函数未运行。 AngualarJS, Cordova

android - 同一应用中的 ons-split-view 和 ons-sliding-menu

javascript - 在 Jest 单元测试中访问 React 组件中的 mobx 可观察属性

javascript - 使用 node.js 将前 100 个质数写入文件

javascript - getElementById 和 null - 为什么?

html - 为什么我的 div 与代码中的另一个 div 重叠?

javascript - 每当以 Bootstrap 的形式出现无效的弹出消息时,我们如何才能停止发送数据?

css 蓝图,创建一个漂浮在容器 div 旁边的 div?附上图片

angularjs - ng-click ons-list-item 内的 span 不起作用