ऑनसेन-यूआई स्वाइप नेविगेशन

Question

मैं 'स्वाइप' नेविगेशन का उपयोग करके ऑनसेन-यूआई पर "एंड्रॉइड" महसूस को कार्यान्वित करने का तरीका जानने का प्रयास कर रहा हूं।

मैंने मूर्तिकला स्वाइपर को लागू करने की कोशिश की, लेकिन बहुत भाग्य नहीं है। मेरा विचार गठबंधन करने के लिए है:

http://codepen.io/negibouze/pen/jEvOYz

enter code here 

http://codepen.io/negibouze/pen/wBLeyp

enter code here 

जब आप स्वाइप टैब परिवर्तन लेकिन यह है कि कड़ी चोट एनीमेशन/प्रभाव पड़ता है। अगर मैं प्रत्येक टैब/स्वाइप एक अलग एचटीएमएल था और एक सूचकांक फ़ाइल नहीं तो भी मुझे यह पसंद आएगा।

कोई विचार या मदद?

Answer 1

शानदार सवाल। दो अलग-अलग दृष्टिकोण हैं:

1. जैसा कि यह टैबबार और इशारा डिटेक्टर का उपयोग करके आपके दूसरे उदाहरण में किया गया है। ऑनसेन 2.0 में slide टैबबार के लिए एनीमेशन है, इसलिए आपको केवल <ons-tabbar animation="slide" ... > जोड़ने की आवश्यकता है। ऑनसेन 2.0 अभी भी अल्फा संस्करण में है लेकिन इसे आगामी सप्ताहों में रिलीज़ किया जाएगा। इस दृष्टिकोण की कमी यह है कि स्वाइप कार्रवाई पूर्ण होने के बाद स्लाइड एनीमेशन शुरू होता है।

आप मूल रूप से अपने ons-tabbar तत्व जोड़ने और फिर इशारा डिटेक्टर कॉन्फ़िगर इस प्रकार है:

ons.ready(function() { 
    // Create a GestureDetector instance over your tabbar 
    // The argument is the actual HTMLElement of tabbar, you can also do document.getElementById(...) 
    var gd = ons.GestureDetector(myTabbar._element[0]); 

    gd.on('swipe', function(event) { 
    var index = myTabbar.getActiveTabIndex(); 
    if (event.gesture.direction === 'left') { 
     if (index < 3) { 
     myTabbar.setActiveTab(++index); 
     } 
    } else if (event.gesture.direction === 'right') { 
     if (index > 0) { 
     myTabbar.setActiveTab(--index); 
     } 
    } 
    }) 
}); 

यहाँ कार्य करना: https://jsfiddle.net/frankdiox/o25novtu/1/

1. ons-tabbar और ons-carousel तत्वों का मेल । इस दृष्टिकोण की कमी यह है कि ons-carousel-item टेम्पलेट या अलग फ़ाइल नहीं प्राप्त कर सकता है (इस पर एक और कामकाज खोजने के लिए टिप्पणियों की जांच करें)।

ons-tab एक page विशेषता की आवश्यकता है और आप इसे कंसोल में त्रुटियों के बिना खाली नहीं छोड़ सकते हैं, लेकिन हम वास्तविक घटक के बजाय ons-tabbar की शैली का उपयोग कर सकते हैं: http://onsen.io/reference/css.html#tab-bar

हम एक पूर्ण स्क्रीन हिंडोला के साथ अब यह गठबंधन एक की तरह आपका उल्लेख किया और पेज की सामग्री तो यह खत्म हो गया या पीछे नहीं आता है हमारे tabbar का सम्मान करने के लिए अगले सीएसएस जोड़ने यह:

ons-carousel[fullscreen] { 
    bottom: 44px; 
} 

अगला कदम है, हम अपनी इसी ग के साथ हर टैब लिंक एरोसेल आइटम:

<div class="tab-bar" id="myTabbar"> 
    <label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(0)"> 
    ... 
    </label> 

    <label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(1)"> 
    ... 
    </label> 

    <label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(2)"> 
    ... 
</div> 

और इसी तरह। इससे यह होगा कि जब हम किसी टैब पर क्लिक करते हैं तो कैरोसेल स्वचालित रूप से बदल जाता है। अब हमें विपरीत कनेक्शन करने की आवश्यकता है: जब हम कैरोसेल को स्वाइप करते हैं तो चेक टैब को अपडेट करें। tabbar मूल रूप से रेडियो बटन का एक सेट है, तो हम सिर्फ एक हम हिंडोला के postchange घटना में चाहते हैं और यह जांच करने की आवश्यकता:

ons.ready(function(){ 
    carousel.on('postchange', function(event){ 
    document.getElementById('myTabbar').children[event.activeIndex].children[0].checked = true; 
    }); 
}); 

अब आप हर carousel-item-index की सामग्री को बदल सकते हैं और सम्मिलित करें ons-page साथ जो तुम चाहो।

यहाँ कार्य करना: http://codepen.io/frankdiox/pen/EVpNVg

हम OnsenUI के आगामी संस्करणों में यह आसान बनाने के लिए एक सुविधा जोड़ सकते हैं।

उम्मीद है कि यह मदद करता है!