List 中的 IONIC Framework Scroll 问题
IONIC Framework Scroll issues in List
我正在使用 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:
中将 overflow-scroll 设置为 true
<ion-content class="has-header" overflow-scroll="true">...
- 在设备上启动应用程序:
ionic run android
...一旦启动,初始视图(播放列表)不会滚动...
任何人都可以帮助我解决这个问题,因为如果不解决这个错误我们就无法启动应用程序。
使用这个 ionic 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
在我的情况下 ionic 1.1.0 在 ios8-9(和 safari) 中滚动的唯一方法正在使用 ion-scroll 而不是 ionic-content:
<ion-scroll scrollbar-y="false" direction="y" style="height:92%">
在我看来,此属性是必需的。没有它,这个技巧就不起作用。另一件事.. 注意选项 data-tap-disabled="true" 可以写在元素的某些 parents 中。
必须将其删除或设置为 false:
data-tap-disabled="true"
在 ion-scroll 上,属性 overflow-scroll 不存在并且属性滚动设置为 true。
我正在使用 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:
中将 overflow-scroll 设置为 true<ion-content class="has-header" overflow-scroll="true">...
- 在设备上启动应用程序:
ionic run android
...一旦启动,初始视图(播放列表)不会滚动...
任何人都可以帮助我解决这个问题,因为如果不解决这个错误我们就无法启动应用程序。
使用这个 ionic 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
在我的情况下 ionic 1.1.0 在 ios8-9(和 safari) 中滚动的唯一方法正在使用 ion-scroll 而不是 ionic-content:
<ion-scroll scrollbar-y="false" direction="y" style="height:92%">
在我看来,此属性是必需的。没有它,这个技巧就不起作用。另一件事.. 注意选项 data-tap-disabled="true" 可以写在元素的某些 parents 中。
必须将其删除或设置为 false:
data-tap-disabled="true"
在 ion-scroll 上,属性 overflow-scroll 不存在并且属性滚动设置为 true。