Question

我有一个现有的angularjs应用程序工作正常，直到我将其转换为离子。我在Chrome浏览器上测试了网站，发现我无法再向下滚动查看长桌。

我做的唯一改变是在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

将此标记包裹在您的桌子上。

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

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

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

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

1 个答案: