ionic-nav-view 带有 'next' 选项

Question

随着我对 Ionic 编程的推进，我发现了这个我不知道如何最好地解决的问题。问题是我想在 header（或最好在 sub-header）上显示：

<昨天今天明天>

因此用户将在今天的页面上启动该应用程序并可以导航到前几天和后几天（它是一个 calendar-like 应用程序）。我打算使用 'yesterday' 和 'tomorrow' 的两个按钮来执行此操作，并且只需使用控制器在页面更改时更改按钮和标题的文本。尽管如此，我还是找到了 ion-nav-view 并且想知道我是否可以通过某种方式调整它来模仿我想要的行为。它确实包括后退选项但不包括前进选项......问题是，这可以做到吗？有没有人设法做像我在这里尝试的事情？

提前致谢。

何塞

Answer 1

@kankamuso: 对于ionic 2，您可以尝试通过以下命令使用选项卡模板创建新项目。

ionic start tabProject tabs --v2

从 http://ionicframework.com/docs/v2/components/#tabs 阅读更多内容

ionic 1请参考这里。 http://ionicframework.com/docs/api/directive/ionTabs/

Answer 2

这是显示我已达到的解决方案的代码。它对我有用。

HTML:

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>My App</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="style.css">
  <link href="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">

  <!-- ionic/angularjs js -->
  <script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>

  <script src="script.js"></script>
</head>

<body>

  <div ng-controller="MyCtrl">
    <div align-title="center" class="bar bar-header bar-stable">
      <button class="button button-clear ">Menú</button>
      <button class="button button-clear">Right</button>
    </div>
    <div class="bar bar-subheader">
      <button class="button icon-left button-clear button-dark" ng-hide="hidePrevious" ng-click="previousDay()"><i class="icon ion-chevron-left"></i> {{previousDayTitle}} </button>
      <h1 class="title"><span style="font-size:35px"> {{todayTitle}} </span></h1>
      <button class="button icon-left button-clear button-dark" ng-hide="hideNext" ng-click="nextDay()"> {{nextDayTitle}} <i class="icon ion-chevron-right"></i></button>

    </div>
    <ion-content class="has-header has-subheader">jjjh sss
      <br> sasas asasa
      <br> sasas
    </ion-content>
    <!--<div class="bar bar-footer bar-balanced">
      <ion-checkbox ng-model="isChecked">Programa</ion-checkbox>
      <ion-checkbox ng-model="isChecked">Alternativo</ion-checkbox>
      <ion-checkbox ng-model="isChecked">Taurina</ion-checkbox>
    </div>-->
  </div>


</body>

</html>

JS:

angular.module('myApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  $scope.title = 'Ionic';

  // 20 August - 27  August, both included
  firstFairDay = new Date(2016, 7, 20);
  lastFairDay = new Date(2016, 7, 27);

  now = new Date(2018, 1, 1);

  weekDays = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'];

  if (now.getTime() >= lastFairDay.getTime()) {
    $scope.hidePrevious = false;
    $scope.hideNext = true;
    now = new Date(lastFairDay);
    todayDayOfWeek = weekDays[now.getDay()];
    todayDayNumber = now.getDate();
    $scope.previousDayTitle = weekDays[(((now.getDay() - 1) % 7) + 7) % 7] + " " + (todayDayNumber - 1);
  } else if (now.getTime() <= firstFairDay.getTime()) {
    $scope.hidePrevious = true;
    $scope.hideNext = false;
    now = new Date(firstFairDay);
    todayDayOfWeek = weekDays[now.getDay()];
    todayDayNumber = now.getDate();
    $scope.nextDayTitle = weekDays[(((now.getDay() + 1) % 7) + 7) % 7] + " " + (todayDayNumber + 1);
  } else {
    $scope.hidePrevious = false;
    $scope.hideNext = false;
    todayDayOfWeek = weekDays[now.getDay()];
    todayDayNumber = now.getDate();
    $scope.previousDayTitle = weekDays[(((now.getDay() - 1) % 7) + 7) % 7] + " " + (todayDayNumber - 1);
    $scope.nextDayTitle = weekDays[(((now.getDay() + 1) % 7) + 7) % 7] + " " + (todayDayNumber + 1);
  }

  $scope.todayTitle = todayDayOfWeek + " " + todayDayNumber;

  $scope.previousDay = function() {
    if (now.getTime() === firstFairDay.getTime()) {
      // Do nothing
    } else {
      now.setDate(now.getDate() - 1);
      todayDayNumber = now.getDate();
      todayDayOfWeek = weekDays[now.getDay()];

      if (now.getTime() === firstFairDay.getTime()) {
        $scope.hidePrevious = true;
        $scope.hideNext = false;
        $scope.todayTitle = todayDayOfWeek + " " + todayDayNumber;
        $scope.nextDayTitle = weekDays[(((now.getDay() + 1) % 7) + 7) % 7] + " " + (todayDayNumber + 1);
      } else {
        $scope.hidePrevious = false;
        $scope.hideNext = false;
        $scope.previousDayTitle = weekDays[(((now.getDay() - 1) % 7) + 7) % 7] + " " + (todayDayNumber - 1);
        $scope.todayTitle = todayDayOfWeek + " " + todayDayNumber;
        $scope.nextDayTitle = weekDays[(((now.getDay() + 1) % 7) + 7) % 7] + " " + (todayDayNumber + 1);
      }
    }
  };

  $scope.nextDay = function() {
    if (now.getTime() === lastFairDay.getTime()) {
      // Do nothing
    } else {
      now.setDate(now.getDate() + 1);

      todayDayNumber = now.getDate();
      todayDayOfWeek = weekDays[now.getDay()];

      if (now.getTime() === lastFairDay.getTime()) {
        $scope.hidePrevious = false;
        $scope.hideNext = true;
        $scope.previousDayTitle = weekDays[(((now.getDay() - 1) % 7) + 7) % 7] + " " + (todayDayNumber - 1);
        $scope.todayTitle = todayDayOfWeek + " " + todayDayNumber;
      } else {
        $scope.hidePrevious = false;
        $scope.hideNext = false;
        $scope.previousDayTitle = weekDays[(((now.getDay() - 1) % 7) + 7) % 7] + " " + (todayDayNumber - 1);
        $scope.todayTitle = todayDayOfWeek + " " + todayDayNumber;
        $scope.nextDayTitle = weekDays[(((now.getDay() + 1) % 7) + 7) % 7] + " " + (todayDayNumber + 1);
      }
    }
  };



});

干杯

ionic-nav-view 带有 'next' 选项

ionic-nav-view with 'next' option

ionic-framework

ionic-view

ionic2