Question

当我推进离子编程时，我已经找到了这个问题，我不知道如何最好地解决。问题是我想在标题上显示（或者最好在子标题上）：

＆LT;明天昨天＆gt;

因此，用户将在今天的页面上启动应用，并可以导航到上一天和下一天（这是一个类似日历的应用）。我计划使用两个按钮来实现这一目标。昨天＆＃39;和明天＆＃39;并使用控制器更改页面更改时按钮和标题的文本。尽管如此，我已经发现了离子导航视图，并且想知道我是否能够以某种方式调整它以模仿我想要的行为。它确实包括后退选项，但不包括前进选项...问题是，这可以做到吗？有没有人设法做我在这里尝试的事情？。

提前致谢。

何塞

Answer 1

@kankamuso：对于离子2，您可以尝试使用以下命令创建带有制表符模板的新项目。

ionic start tabProject tabs --v2

从http://ionicframework.com/docs/v2/components/#tabs

了解详情

对于离子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);
      }
    }
  };



});

干杯

离子导航视图与＆＃39; next＆＃39;选项

2 个答案: