Y und X Scrolling-Karten (ionische oder Winkel Art und Weise)

Ich würde es sehr zu können, wie sowohl vertikale als auch horizontale Scrollen mit Karten zu tun, wie folgt aus:Y und X Scrolling-Karten (ionische oder Winkel Art und Weise)

Scrollen nach unten fünften Reihe zeigen würde, mit einigen Karten. Wenn vertikales horizontales Scrollen zu tun wäre es fantastisch, wenn die Karten einrastet, wenn sie durch Umklappen ..

Die .json würde wie folgt aussehen:

{"first": ["1A"], 
"second": ["2A", "2B"], 
"third": ["3A", "3B"], 
"fourth": ["4A", "4B", "4C", "4D"], 
"fifth": ["5A","5B"]}

dies getan werden kann? Irgendwelche Zeiger (wie Tutorials, Bibliotheken oder Codebeispiele) würden geschätzt werden.

Quelle

2016-08-06 Norfeldt

Können Sie Ihre Arbeit an dem Problem bereitstellen? – Smit

Diese Solution wird für Sie arbeiten, verwendet es die beiden ion-slides und ion-scroll Richtlinien.

Es gibt nur eine Note zu kümmern, falls Sie erste Seite für jeden Schieberegler festlegen möchten Sie Ihre JSON ändern müssen, und verwenden Sie den Schieberegler Option initialSlide

HTML:

<html ng-app="starter"> 

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" /> 
    <title>Card Scroller</title> 
    <link href="style.css" rel="stylesheet" /> 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" /> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
    <script src="script.js"></script> 
</head> 

<body> 

    <ion-nav-bar class="bar-positive"></ion-nav-bar> 

    <ion-nav-view></ion-nav-view> 

    <script id="home.html" type="text/ng-template"> 
    <ion-view view-title="Card Scroller"> 

     <ion-content class="padding" id="content"> 
     <ion-scroll zooming="true" direction="y" class="scrolling-content"> 
      <ion-slides class="card" options="{pagination: false, initialSlide: 0, disableScroll:false}" slider="classA.slider" ng-repeat="slide in mySlides"> 

      <ion-slide-page class="page" ng-repeat="item in slide"> 
      {{item}} 
      </ion-slide-page> 
      </ion-slides> 

     </ion-scroll> 
     </ion-content> 

    </ion-view> 
    </script> 

</body> 

</html>

JS:

var nameApp = angular.module('starter', ['ionic']); 

nameApp.config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider 
    .state('home', { 
     url: '/', 
     templateUrl: 'home.html', 
     controller: 'HomeCtrl' 
    }); 
    $urlRouterProvider.otherwise("/"); 

}); 


nameApp.controller('HomeCtrl', function($scope) { 

    $scope.mySlides = { 
    "first": ["1A"], 
    "second": ["2A", "2B"], 
    "third": ["3A", "3B"], 
    "fourth": ["4A", "4B", "4C", "4D"], 
    "fifth": ["5A", "5B"] 
    } 

});

Quelle

2016-08-14 16:57:00 ProllyGeek

Ich scheine Probleme beim Scrollen durch die Karten zu haben. Ich muss es direkt zwischen den Karten greifen, um einen Griff zu bekommen, aber es schnappt nach dem Ziehen zurück. – Norfeldt

@Norfeldt es ist ziehbar, willst du nur zum scrollen wischen? Ich bekomme keine genaue Ausgabe – ProllyGeek

Sorry für meine neuen Fragen, aber ich lerne nur AngularJS und Ionic (und habe ein wenig Probleme mit der CSS). Ja, ich wollte wischen, um zu scrollen, weil die Gesten auf Mobile und Web die gleichen sein sollten. – Norfeldt

Y und X Scrolling-Karten (ionische oder Winkel Art und Weise)

Antwort

Verwandte Themen