2015-05-18 4 views
13

पहले यहां कभी पद स्वाइप करने के लिए, लेकिन वास्तव में कुछ मदद या इस बारे में सलाह की सराहना करेंगे:कैसे अलग ईओण टैब के माध्यम से

मैं वर्तमान में एक परियोजना आयनिक ढांचे का उपयोग कर निर्माण कर रहा हूँ और एक कार्यात्मक संस्करण के निर्माण के बाद मैंने तय कर लिया है कि होने ऐप के अलग-अलग अनुभाग दिखाने के लिए टैब के बीच स्वाइप करने की क्षमता।

मैं टैब टेम्पलेट कि आयनिक प्रदान करता है ताकि प्रत्येक पृष्ठ आयन नव-व्यू तत्व के माध्यम से दिखाया गया है और राज्य में परिवर्तन app.js फ़ाइल में घोषित के माध्यम से कहा जाता है एक टेम्पलेट है है का उपयोग करके ऐप बनाया (देखें नीचे):

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']) 

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
    // for form inputs) 
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if (window.StatusBar) { 
     // org.apache.cordova.statusbar required 
     StatusBar.styleLightContent(); 
    } 
    }); 
}) 

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

    // setup an abstract state for the tabs directive 
    .state('tab', { 
    url: "/tab", 
    abstract: true, 
    templateUrl: "templates/tabs.html" 
    }) 

    // Each tab has its own nav history stack: 

    .state('tab.dash', { 
    url: '/dash', 
    views: { 
     'tab-dash': { 
     templateUrl: 'templates/tab-dash.html', 

     } 
    } 
    }) 

    .state('tab.notes', { 
     url: '/notes', 
     views: { 
     'tab-notes': { 
      templateUrl: 'templates/tab-notes.html', 
      controller: 'noteController' 
     } 
     } 
    }) 

    .state('tab.todos', { 
    url: '/todos', 
    views: { 
     'tab-todos': { 
     templateUrl: 'templates/tab-todos.html', 
     controller: 'todoController' 
     } 
    } 
    }) 

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

    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/tab/dash'); 

}); 

जो मैं जानना चाहता हूं वह है; क्या कोई तरीका है कि मैं उपयोगकर्ता को अलग-अलग पृष्ठों के बीच स्विच करने के लिए बाएं और दाएं स्वाइप करने की अनुमति दे सकता हूं?

क्या यह भी संभव है? यदि हां, तो क्या यह होना चाहिए जब स्क्रॉल करने की आवश्यकता हो?

मुझे उम्मीद है कि यह पर्याप्त जानकारी है, अगर नहीं, तो मुझे जितना संभव हो उतना प्रदान करने में खुशी होगी। सुनने के लिए धन्यवाद!

उत्तर

21

हां, यह संभव है। मैं टैब टेम्पलेट के साथ चारों ओर खेला और निम्न परिणाम के लिए आया था:

<ion-content on-swipe-right="goBack()" on-swipe-left="goForward()"> 

और प्रत्येक नियंत्रक में प्रासंगिक कार्यों की आवश्यकता होगी:

.controller('MyCtrl', function ($scope, $ionicTabsDelegate) { 

    $scope.goForward = function() { 
     var selected = $ionicTabsDelegate.selectedIndex(); 
     if (selected != -1) { 
      $ionicTabsDelegate.select(selected + 1); 
     } 
    } 

    $scope.goBack = function() { 
     var selected = $ionicTabsDelegate.selectedIndex(); 
     if (selected != -1 && selected != 0) { 
      $ionicTabsDelegate.select(selected - 1); 
     } 
    } 
}) 

अगर यह सबसे अच्छा अभ्यास है मैं नहीं जानता और बहुत मजबूत जैसे मैंने कहा, मैंने docs पढ़ने के बाद बस थोड़ा सा खेला।

मुझे उम्मीद है कि मैंने आपको यह विचार दिया है कि यह कैसे काम कर सकता है।

+5

लेकिन जब आप ऐसा करते हैं तो आपको उस '''''''' एनीमेशन नहीं मिलेगा। – InfinitePrime

+0

स्लाइड एनीमेशन के साथ आपका क्या मतलब है? क्या आप कृपया एक उदाहरण दे सकते हैं? – QueryLars

+1

यह काम करता है लेकिन दृश्य को दूसरे के रूप में एक दृश्य के रूप में कूद दिया जाता है। एनीमेशन द्वारा कोई एनीमेशन नहीं है, मेरा मतलब है कि जब आप सिडमेनू को आयनिक में खींचते हैं तो आपको खींचने वाली एनीमेशन की तरह। अगला दृश्य पक्ष से खींचता है और ब्रेकपॉइंट के बाद व्यूपोर्ट में आ जाता है .. लेकिन धन्यवाद यह काम करता है – krv

संबंधित मुद्दे