列表中的 IONIC 框架滚动问题答案

【问题标题】：IONIC Framework Scroll issues in List列表中的 IONIC 框架滚动问题
【发布时间】：2015-11-02 23:11:36
【问题描述】：

我正在使用 ionic 框架的简单列表视图，它在某些设备上运行良好，而在某些设备上它隐藏了滚动条。用户在某些设备中根本无法滚动。许多用户都面临同样的问题，他们已经讨论过here。

重现同样的问题

使用

创建应用程序

ionic start scrollTest sidemenu

-将“PlaylistsCtrl”控制器修改为：

.controller('PlaylistsCtrl', function($scope) {
    $scope.playlists = [
      { title: 'Reggae', id: 1 },
      { title: 'Chill', id: 2 },
      { title: 'Dubstep', id: 3 },
      { title: 'Indie', id: 4 },
      { title: 'Rap', id: 5 },
      { title: 'Cowbell', id: 6 },
      { title: 'Breaks', id: 7 },
      { title: 'Jungle', id: 8 },
      { title: 'Drum & Bass', id: 9 },
      { title: 'Classics', id: 10 },
      { title: 'Blah', id: 11 },
      { title: 'Foo', id: 12 },
      { title: 'Bar', id: 13 },
      { title: 'House', id: 14 },
      { title: 'Trance', id: 15 },
      { title: 'EDM', id: 15 },
      { title: 'Country', id: 16 },
      { title: 'Rock', id: 17 }
    ];
  })

-在 playlists.html 中设置溢出滚动为真：

<ion-content class="has-header" overflow-scroll="true">...

-在设备上启动应用程序：

ionic run android

...一旦启动，初始化视图（播放列表）就不会滚动...

任何人都可以帮助我解决这个问题，这会很棒，因为如果不解决这个错误，我们就无法启动应用程序。

【问题讨论】：

标签： cordova ionic-framework

【解决方案1】：

使用这个离子js：

<script src="//code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>

删除overflow-scroll="true" in

<ion-content class="has-header" overflow-scroll="true">

在 app.js 中添加这段代码

if(ionic.Platform.isAndroid())
    $ionicConfigProvider.scrolling.jsScrolling(false);

例如：

angular.module('ionicApp', ['ionic']).config(function($ionicConfigProvider)   {
    if (ionic.Platform.isAndroid())
       $ionicConfigProvider.scrolling.jsScrolling(false);
     })

上面的代码和overflow-scroll="true" 做的事情是一样的。它使用原生滚动而不是 jsScroll

【讨论】：

hi...@boobalan...我的问题是jsScrolling(false) 根本不适用于 iOS 设备...。还有其他方法吗？

【解决方案2】：

在我使用 ionic 1.1.0 的情况下，在 ios8-9（和 safari） 中滚动的唯一方法是使用 ion-scroll 而不是 ionic-content： p>

<ion-scroll scrollbar-y="false" direction="y" style="height:92%">

在我看来，这个属性是必需的。没有它，诀窍是行不通的。另一件事..注意选项 data-tap-disabled="true" 可以写在您元素的某些父项中。

必须删除或设置为false：

data-tap-disabled="true"

在 ion-scroll 上，属性 overflow-scroll 不存在，并且属性 scroll 设置为 true。

【讨论】：