ionic-nav-view с опцией «Далее»

По мере того, как я продвигаюсь в ионном программировании, я обнаружил эту проблему, которую не знаю, как лучше всего решить. Дело в том, что я хочу показать в заголовке (а лучше в подзаголовке) это:

‹ вчера СЕГОДНЯ завтра>

Таким образом, пользователи запустят приложение на сегодняшней странице и смогут переходить к предыдущим и следующим дням (это приложение похоже на календарь). Я планировал сделать это с помощью двух кнопок «вчера» и «завтра» и просто изменить текст для кнопок и заголовок при изменении страницы с помощью контроллера. Тем не менее, я обнаружил ion-nav-view и задавался вопросом, могу ли я каким-то образом адаптировать его, чтобы имитировать желаемое поведение. Он включает опцию назад, но не вперед... Вопрос в том, можно ли это сделать?. Кому-нибудь удалось сделать что-то вроде того, что я пытаюсь сделать здесь?

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

Хосе


ionic-framework ionic2 ionic-view
person kankamuso    schedule 18.07.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

@kankamuso: Для ionic 2 вы можете попробовать создать новый проект с шаблоном вкладок с помощью следующей команды.

ionic start tabProject tabs --v2

Подробнее читайте на http://ionicframework.com/docs/v2/components/#tabs

Для Ionic 1, пожалуйста, обратитесь сюда. http://ionicframework.com/docs/api/directive/ionTabs/

person trungk18    schedule 19.07.2016
comment
Спасибо @trungj18, но разве пространство на странице с вкладками не ограничено? Я имею в виду, что мне нужно включить 8 вкладок, каждая с текстовым заголовком, состоящим из дня недели плюс номер дня месяца... Кроме того, я хочу, чтобы текущий элемент был центрирован (выбранный день)... - person kankamuso; 19.07.2016
comment
Я думаю, это потому, что ширины устройства будет недостаточно для 8 вкладок, приятель: D Если вы хотите расширить архив до 8 вкладок, можете попробовать переключатель или флажок ionicframework.com/docs/components/#радио-кнопки - person trungk18; 19.07.2016
comment
Боюсь, это не решит мою проблему. Мне просто нужен режим для навигации по большому количеству страниц, а режим в середине панели будет отображаться в пространстве содержимого. - person kankamuso; 19.07.2016
comment
Я расскажу вам, как это хора. Спасибо - person kankamuso; 19.07.2016
comment
Ничего, добавление большого количества вкладок просто забьет панель, нет свайпа или другого механизма, чтобы пользовательский интерфейс оставался чистым и простым. Любые другие предложения? - person kankamuso; 19.07.2016
comment
Можно попробовать слайд-бокс ionicframework.com/docs/api/directive/ionSlideBox - person trungk18; 19.07.2016
comment
Определенно, это лучшая отправная точка. Тем не менее, мне не очень нравятся точки внизу... Мне удалось создать вручную код, который делает именно то, что мне нужно, используя простой Javascript и AngularJS... Спасибо за вашу помощь!. - person kankamuso; 19.07.2016

arrow_upward
1
arrow_downward

Вот код, который показывает решение, которое я достиг. Это работает для меня.

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);
      }
    }
  };



});

Ваше здоровье

person kankamuso    schedule 19.07.2016
comment
Рад слышать, что вы нашли решение. Для вас ;) - person trungk18; 20.07.2016