将现有 angularjs 应用程序转换为离子后无法滚动

Question

我有一个现有的 angularjs 应用程序，在我将其转换为 ionic 之前它运行良好。我在 chrome 浏览器上测试了该网站，发现我无法再向下滚动看到很长的 table.

我所做的唯一更改是 html 代码；

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes, width=device-width">
  <title>test-view</title>

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  <link rel="stylesheet" href="lib/ionic/js/bower_components/angular-material/angular-material.min.css">
  <link rel="stylesheet" href="lib/ionic/js/bower_components/ng-table/dist/ng-table.min.css">
  <link rel="stylesheet" href="css/app.css"/>

  <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="cordova.js"></script>

  <!--<script src="../../bower_components/angular/angular.min.js"></script>-->
  <!--<script src="../../bower_components/angular-animate/angular-animate.min.js"></script>-->
  <script src="lib/ionic/js/bower_components/angular-aria/angular-aria.min.js"></script>
  <script src="lib/ionic/js/bower_components/angular-material/angular-material.min.js"></script>

  <script src="lib/ionic/js/bower_components/angular-route/angular-route.min.js"></script>
  <script src="lib/ionic/js/bower_components/angular-moment/angular-moment.min.js"></script>
  <script src="lib/ionic/js/bower_components/angular-google-chart/ng-google-chart.js"></script>
  <script src="lib/ionic/js/bower_components/moment/moment.js"></script>
  <script src="lib/ionic/js/bower_components/angular-cookies/angular-cookies.js"></script>

  <script src="lib/ionic/js/bower_components/ng-table/dist/ng-table.js"></script>

  <div ng-include src="'partials/header.html'"></div>
</head>
<body>

<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers-func.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>

<div ng-controller="ViewCtrl" class="container">
    <table ng-table="tableParams" class="table table-bordered">
      <thead>

      <tr>
        <th>name</th>
        <th>symbol</th>
      </tr>

      <thead>
      <tbody>
      <tr ng-repeat="vw $data">
        <td data-title="'name'" >
          {{vw.name}}
        </td>
        <td data-title="'symbol'">
          {{vw.symbol}}
        </td>
    </table>
</div>
</body>
</html>

如何让代码可以滚动？

Answer 1

将此标签包裹在您的 table 上。

<ion-content class="has-header" overflow-scroll="true">
<!-- table contents here -->
</ion-content>

以上代码将使用原生滚动而不是js滚动。请注意，它可能不适用于较低版本的 Android。只要您使用的是 Android 4.2 及以上版本，您就很安全。

由于您要添加一个 html 部分，我假设您的 html 上有一个 header。因此，使用 class="has-header".

将现有 angularjs 应用程序转换为离子后无法滚动

Cannot scroll after converting existing angularjs app to ionic

angularjs

ionic-framework

ionic