溫泉UI滑動導航

Question

我想弄清楚如何通過使用'滑動'導航實現Onsen-UI的「android」感覺。

我試過實施idangerous swiper，但沒有多少運氣。我的想法是要結合：

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

enter code here 

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

enter code here 

當你刷卡，標籤的變化，但有一個刷卡的動畫/效果。我也會喜歡它，如果每個標籤/刷卡是一個不同的HTML而不是一個索引文件。

任何想法或幫助？

Answer 1

偉大的問題。有兩種不同的方法：

1. 就像在第二個例子中所做的那樣，使用tabbar和手勢檢測器。溫泉2.0有一個slide動畫爲tabbar，所以你只需要添加<ons-tabbar animation="slide" ... >。溫泉2.0仍然是alpha版本，但它將在未來幾周內發佈。這種方法的缺點是在滑動動作完成後滑動動畫開始。

你基本上添加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/

結合ons-tabbar和ons-carousel元件。此方法的缺點是ons-carousel-item無法獲取模板或分隔文件（請查看註釋以查找其他解決方法）。

ons-tab需要page屬性，你不能讓它空白，而不在控制檯中的錯誤，但我們可以用ons-tabbar的風格，而不是實際的組件：http://onsen.io/reference/css.html#tab-bar

我們現在有一個全屏旋轉木馬結合起來就像一個你所提到的，並添加下一個CSS使頁面內容尊重我們的TabBar所以它不會翻倒或背後：

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

下一步，我們每一個鏈接標籤，其對應的C arousel item：

<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的未來版本，以使它更容易些。

希望它有幫助！