离子连续滚动

Question

我正在寻找一种方式来实现文本滚动连续

基本上，我想有一个在线的文字随着时间的推移表，找到下一船离港，我想滚动它横向，双向和连续，就像旋转木马一样。

这可能吗？我该怎么做？

在此先感谢

Answer 1

指令滚动<ion-scroll >工作。

<ion-scroll zooming="true" direction="x" style="width: 500px; height: 500px"> 
     </ion-scroll> 

看看这个http://codepen.io/rajeshwarpatlolla/pen/xGWBja

Answer 2

您可以检查我的codepen，不完美，但也许这将是有益的。 http://codepen.io/kmlzjc/pen/bZjjRg

事情是使用离子无限滚动离子滚动或离子内容。这样

<ion-content class="padding" > 
    <ion-scroll direction="x" class="item"> 
    <div ng-repeat="scrollItem in scrollItems" class="scroll-item">  
     <strong>{{ scrollItem.id }}</strong> 
     <hr /> 
     <span>{{ scrollItem.index }}</span> 
    </div> 
    </ion-scroll> 
    <ion-infinite-scroll on-infinite="load()" distance="20%"></ion-infinite-scroll> 
</ion-content> 

在这种情况下，当滚动将是20％从端STH，负载功能将被烧成，新数据可以被加载。在这里我使用虚拟函数来添加新项目到scrollItems列表中。

$scope.load = function() { 
    var previousLength = $scope.scrollItems.length; 
    for(var i = 0; i < 10; i++) { 
    $scope.scrollItems.push({ 
     id: Math.random() * 1000, 
     index: previousLength + i + 1 
    }); 
    } 
    $scope.$broadcast('scroll.infiniteScrollComplete'); 
}; 

而一旦数据被加载有广播的事件，刷新滚动。 $scope.$broadcast('scroll.infiniteScrollComplete');

还检查离子滚动文档http://ionicframework.com/docs/api/directive/ionScroll/。将会有关于离子无限滚动的解释。