Question

我正在使用JavaScript滑块/ Owl Carousel，但问题是它在我的Ionic项目的内页中不起作用。

换句话说，当我将HTML代码粘贴到项目的主页中时，它可以很好地工作，但是如果我在内页中粘贴相同的代码，例如“个人资料页面”，则它无效。

我已经从“index.html”页面调用了滑块CSS和JavaScript文件，该页面位于“src”文件夹中。

（我的JavaScript插件正在主页上，因为HomePage是根页面，配置文件是内页。如果我将ProfilePage更改为根页面，我的JavaScript插件将起作用。）

下面是我从中调用owl.slider CSS和JS文件的索引页面：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link href="https://fonts.googleapis.com/css?family=Lato|Poppins" rel="stylesheet">

  <!-- CALL THE OWL.SLIDER FILE -->
  <link href="assets/css/owl.carousel.min.css" rel="stylesheet">
  <!-- CALL THE OWL.SLIDER FILE -->


  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
      It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>
  <!-- CALL THE OWL.SLIDER FILE -->
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/owl.carousel.js"></script>
  <script>
    $(document).ready(function() {
      var owl = $('.owl-carousel');
      owl.owlCarousel({
        items: 4,
        loop: true,
        margin: 10,
        autoplay: true,
        autoplayTimeout: 1000,
        autoplayHoverPause: true
      });
      $('.play').on('click', function() {
        owl.trigger('play.owl.autoplay', [1000])
      })
      $('.stop').on('click', function() {
        owl.trigger('stop.owl.autoplay')
      })
    })
  </script>
  <!-- CALL THE OWL.SLIDER FILE -->
</body>
</html>

JavaScript插件在我的离子项目的内页中不起作用

0 个答案: