IONIC框架滚动列表中的问题 [英] IONIC Framework Scroll issues in List

问题描述

我使用离子框架的简单列表视图，它工作正常在一些设备和一些设备它隐藏滚动条。用户无法在某些设备中滚动。许多用户面临着相同的问题，他们已经讨论过此处。

重现相同的问题

app with

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：'Drums& 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中滚动到true：

< ion-content class =has-headeroverflow-scroll =true> ... / p>

-Launch应用程式在装置上：

离子运行android

...一旦启动，init视图（播放列表）不会滚动...

解决方案

如果你不能解决这个问题，我们可以帮助你解决这个问题。 div>

使用此离子js：

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

在

中移除 overflow-scroll = b
$ b

 < ion-content class =has-headeroverflow-scroll =true> 
  

在app.js中添加此代码

  if（ionic.Platform.isAndroid（））
 $ ionicConfigProvider.scrolling.jsScrolling（false）; 
  

例如：

  angular.module（'ionicApp'，['ionic']）config（function（$ ionicConfigProvider）{
 if（ionic.Platform.isAndroid b $ b $ ionicConfigProvider.scrolling.jsScrolling（false）; 
}）
  

代码做同样的事情overflow-scroll =true做。它使用本机滚动，而不是jsScroll

I am using simple list view of ionic framework it works fine in some devices and some devices it hides the scroll bar. User can not scroll at all in some devices. Many of the users are facing same problem and they have discussed it here.

To reproduce the same issue

create app with

ionic start scrollTest sidemenu

-Modified "PlaylistsCtrl" Controller to be:

.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 }
    ];
  }) 

-Set overflow-scroll to true in playlists.html:

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

-Launch app on device:

ionic run android

... and once it starts, the init view (playlists) does not scroll...

Any one can help me out how to deal with this issue it will be great, as we can not launch the application without solving this bug.

解决方案

Use this ionic js:

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

Remove overflow-scroll="true" in

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

Add this code in app.js

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

Eg:

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

the above code does same things as overflow-scroll="true" do . and it use native scroll instead of jsScroll

这篇关于IONIC框架滚动列表中的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！