列表中的IONIC Framework滚动问题

时间:2015-01-03 18:41:25

标签: cordova ionic-framework

我正在使用离子框架的简单列表视图,它在某些设备中工作正常,而某些设备则隐藏了滚动条。用户无法在某些设备中滚动。许多用户面临同样的问题,他们已经讨论过here

重现同样的问题

使用

创建应用

ionic start scrollTest sidemenu

-Modified“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中设置overflow-scroll为true:

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

- 在设备上启动应用:

ionic run android

...一旦启动,初始视图(播放列表)就不会滚动...

任何人都可以帮助我解决这个问题,因为我们无法解决这个问题而无法启动应用程序。

2 个答案:

答案 0 :(得分:7)

使用此离子js:

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

中删除 overflow-scroll =“true”
<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

答案 1 :(得分:1)

离子1.1.0 的情况下,滚动 ios8-9(和safari)的唯一方法是使用ion-scroll代替ionic-content:

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

我觉得这个属性是必需的。如果没有它,诀窍就无法奏效。另一件事......注意选项 data-tap-disabled =&#34; true&#34; ,可以在元素的某些父级中编写。

必须删除或设置为false:

data-tap-disabled="true"

在离子滚动时,属性overflow-scroll不存在,属性scroll设置为true。