2016-07-31 2 views
-1

Я ищу способ реализации текста непрерывной прокруткиИонных непрерывная прокрутка

В принципе, я хотел бы иметь в линии текста с временной таблицей для следующих лодочных отступлений, и я хотел бы, чтобы прокрутить это горизонтально, в обоих направлениях и непрерывно, как карусель.

enter image description here

Возможно ли это? Как мне это сделать?

Заранее спасибо

ответ

0

Директива <ion-scroll > работает для прокрутки.

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

Посмотрите этот http://codepen.io/rajeshwarpatlolla/pen/xGWBja

+0

Спасибо за вашу помощь, мне удалось сделать, как в вашем примере, но я пытаюсь удалить «стены» прокрутки и сделать ее непрерывной. –

+0

Он работает с этим решением. Спасибо –

0

Вы можете проверить мои codepen, не идеально, но, возможно, это будет полезно. http://codepen.io/kmlzjc/pen/bZjjRg

Дело в том, чтобы использовать ионно-бесконечный свиток с ионным свитком или ионным содержимым. Sth как этот

<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% от конца, то функция нагрузки будет срабатывать так что новые данные могут быть загружены. Здесь я делаю это с помощью фиктивной функции, которая добавляет новые элементы в список 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/. Будет объяснение на бесконечно-прокрутке.

+0

Спасибо за помощь ! Я буду следить за вашим кодом, чтобы попытаться заставить его работать, как я хочу! Благодаря ! –

Смежные вопросы