Squeak.ru - шаблоны программирования

Как я могу добавить функцию слайда для вложенной панели вкладок в ionic?

Как я могу добавить функцию слайда для вложенной панели вкладок в ionic framework, если у нас есть шесть вкладок, поэтому я хочу, чтобы только три вкладки из шести вкладок отображались на экране мобильного устройства, а также могли перемещаться влево или вправо на другую вкладку?

Мой HTML-шаблон

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Tabs Example</title>

    <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
  </head>

  <body>

    <ion-nav-bar class="nav-title-slide-ios7 bar-positive">
          <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view animation="slide-left-right"></ion-nav-view>

    <script id="templates/tabs.html" type="text/ng-template">

        <ion-tabs class="tabs-icon-top tabs-positive">

            <ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
                <ion-nav-view name="home-tab"></ion-nav-view>
            </ion-tab>

            <ion-tab title="About" icon="ion-ios7-information" ui-sref="tabs.about.page1">
                <ion-nav-view name="about-tab"></ion-nav-view>
            </ion-tab>

        </ion-tabs>

    </script>

    <script id="templates/home.html" type="text/ng-template">

        <ion-view title="Home">
            <ion-content class="padding">
               Please check about tab
            </ion-content>
        </ion-view>

    </script>

    <script id="templates/about.html" type="text/ng-template">

        <ion-view title="About">


          <ui-view name="about-page"></ui-view>

        </ion-view>

    </script>

    <script id="templates/about-page1.html" type="text/ng-template">

        <ion-view title="Page 1">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item tab-item-active" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content class="padding has-tabs-top">
     <p> Page 1</p>
   </ion-content>
 </ion-view>

    </script>

    <script id="templates/about-page2.html" type="text/ng-template">

        <ion-view title="Page 2">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item tab-item-active" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content class="padding has-tabs-top">
     <p> Page 2</p>
   </ion-content>
 </ion-view>

    </script>

  </body>
</html>

Полный исходный код см. в моей проблеме с вложенной панелью вкладок на codepen.

Примечание. Я просто показываю панель с двумя вложенными вкладками из панели с шестью вложенными вкладками в моем примере кода в codepen.

ionic-framework angularjs ionic
01.07.2015

Ответы:


1

Вы можете использовать директивы Ionic, такие как пролистывание, пролистывание влево и пролистывание вправо, для скользящей навигации между вкладками. Вот пример, который я сделал из вашего кода. http://codepen.io/anon/pen/bdLwPz

Перейдите на вкладку «О программе», затем нажмите и проведите пальцем влево. БАМ! Магия! Подробнее о событиях жестов читайте здесь: http://ionicframework.com/docs/api/directive/onSwipe/

Вот HTML:

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Tabs Example</title>

    <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
  </head>

  <body ng-controller="main">

    <ion-nav-bar class="nav-title-slide-ios7 bar-positive">
          <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view animation="slide-left-right"></ion-nav-view>

    <script id="templates/tabs.html" type="text/ng-template">

        <ion-tabs class="tabs-icon-top tabs-positive">

            <ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
                <ion-nav-view name="home-tab"></ion-nav-view>
            </ion-tab>

            <ion-tab title="About" icon="ion-ios7-information" ui-sref="tabs.about.page1">
                <ion-nav-view name="about-tab" ></ion-nav-view>
            </ion-tab>

        </ion-tabs>

    </script>

    <script id="templates/home.html" type="text/ng-template">

        <ion-view title="Home">
            <ion-content class="padding">
               Please check about tab
            </ion-content>
        </ion-view>

    </script>

    <script id="templates/about.html" type="text/ng-template">

        <ion-view title="About">


          <ui-view name="about-page"></ui-view>

        </ion-view>

    </script>

    <script id="templates/about-page1.html" type="text/ng-template">

        <ion-view title="Page 1">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item tab-item-active" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content on-swipe-left="onSwipeLeft()" class="padding has-tabs-top">
     <p> Page 1</p>
   </ion-content>
 </ion-view>

    </script>

    <script id="templates/about-page2.html" type="text/ng-template">

        <ion-view title="Page 2">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item tab-item-active" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content class="padding has-tabs-top">
     <p> Page 2</p>
   </ion-content>
 </ion-view>

    </script>

  </body>
</html>

и JS:

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

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

    $stateProvider

    .state('tabs', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
    })

    .state('tabs.home', {
        url: "/home",
        views: {
            'home-tab': {
                templateUrl: "templates/home.html",
            }
        }
    })

    .state('tabs.about', {
        url: "/about",
        abstract: true,
        views: {
            'about-tab': {
                templateUrl: "templates/about.html"
            }
        }
    })

    .state('tabs.about.page1', {
        url: "/page1",
        views: {
            'about-page': {
                templateUrl: "templates/about-page1.html"
            }
        }
    })

    .state('tabs.about.page2', {
        url: "/page2",
        views: {
            'about-page': {
                templateUrl: "templates/about-page2.html"
            }
        }
    });

    $urlRouterProvider.otherwise("/tab/home");

})
.controller('main', function($scope, $state){

  $scope.onSwipeLeft = function(){
    $state.go('tabs.about.page2')
  };

})
01.07.2015
  • Спасибо, но как я могу сделать 3 вложенные вкладки из 6 вложенных вкладок для отображения на одном экране мобильного устройства, чтобы я мог скользить влево или вправо, как моя концепция? 02.07.2015
  • Вы посмотрели на кодовую ручку, которую я сделал правильно, я просто добавил в ваш код функцию свайпа. 03.07.2015

    • 2

    Пожалуйста, проверьте ссылку ниже. Это то, что вы, возможно, ищете.

    https://github.com/JKnorr91/ion-slide-box-tabs

    <ion-content scroll="false">
<ion-slide-box show-pager="false" ion-slide-tabs>
    <ion-slide ion-slide-tab-label="test"><h1>Tab 1</h1></ion-slide>
    <ion-slide ion-slide-tab-label="secondTest"><h1>Tab 2</h1></ion-slide>
    <ion-slide ion-slide-tab-label="<b>boldTest</b>"><h1>Tab 3</h1></ion-slide>
</ion-slide-box>

    Add the slidingTabsDirective.js to your Ionic Project and include it in your index.html.

    Пример. Если вы поместите скользящийTabsDirective.js в свою папку js, вы должны вставить следующую строку в ваш index.html в любом месте после включения ionic.

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

    Добавьте SCSS или код CSS из slideTabs.scss или slideTabs.css в стили вашего проекта.

    Все необходимые файлы и пример доступны в репозитории gitup, откуда я их взял.

    05.09.2015
    Новые материалы
    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..
    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..
    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...