Question

我非常希望能够使用卡进行垂直和水平滚动，如下所示：

向下滚动会显示第五行有些牌。当进行垂直水平滚动时，如果卡片在翻转时卡入到位，那将是非常棒的。

.json看起来像这样：

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

可以这样做吗？任何指针（如教程，库或代码示例）将不胜感激。

Answer 1

此 Solution 适用于您，它同时使用 ion-slides 和 ion-scroll 指令。

只需要处理一个注意事项;如果要为每个滑块设置初始页面，则必须修改JSON，并使用滑块选项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"]
  }

});

Y和X滚动卡（离子或角度方式）

1 个答案: