标签模板之间的离子滑动 [英] Ionic sliding between tabs template
问题描述
我下载了 Ionic 标签模板.我玩了一段时间,想知道如何添加可以在选项卡之间导航的滑动功能.在这种情况下,我想通过动画和平滑过渡来滑动,而不是突然切换选项卡.
I downloaded Ionic tabs template. I played around with it for a while and am wondering how to add a sliding function that can navigate between tabs. In this case, I want to slide with animations and a smooth transition, not a sudden tab switch.
我在 Ionic Docs 上看到过.它有这个滑动框功能.
I saw on Ionic Docs. It has this slide box feature.
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
但后来我使用了 Ionic 的标签模板
But then I am using tabs template from Ionic
<ion-tabs>
<ion-tab>
<ion-nav-view>
</ion-nav-view>
</ion-tab>
我如何才能将这些合并在一起?
How would I be able to incorporate these to together?
谢谢!
推荐答案
可以在 IONIC 选项卡结构上轻松完成.
can be done easily on IONIC tabs structure.
首先,您需要在 app.js 中将控制器添加到您的选项卡中:
firstly, you need to add controller to your tab in app.js:
.state('tab', {
url: '/tab',
abstract: true,
controller: 'TabsCtrl',
templateUrl: 'views/base/tabs.html'
})
然后,您需要使用 on-swipe-left, on-swipe-right attr 和 classes: 'active-tab-{{ activeTab }}"' 修改您的 tabs.html 到您的 ion-tabs 和 'nav-tab-0' 给你第一个 ion-nav-view .最后一个数字必须在下一个 ion-nav-views 中增加.
then, you need to modify your tabs.html with on-swipe-left, on-swipe-right attr and classes: 'active-tab-{{ activeTab }}"' to your ion-tabs and 'nav-tab-0' for you first ion-nav-view . Last number have to increase in next ion-nav-views.
所以你的 tabs.html 应该是这样的:
So your tabs.html should look like this:
<ion-tabs class="tabs-icon-only tabs-color-active-positive active-tab-{{ activeTab }}" on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()">
<ion-tab title="Notifications" icon-off="ion-flag" icon-on="ion-flag" ui-sref="tab.notifications">
<ion-nav-view name="tab-notifications" class="nav-tab-0"></ion-nav-view>
</ion-tab>
<ion-tab title="Profile" icon-off="ion-person" icon-on="ion-person" ui-sref="tab.profile">
<ion-nav-view name="tab-profile" class="nav-tab-1"></ion-nav-view>
</ion-tab>
<ion-tab title="Home-Map" icon-off="ion-map" icon-on="ion-map" ui-sref="tab.home_map">
<ion-nav-view name="tab-home-map" class="nav-tab-2"></ion-nav-view>
</ion-tab>
<ion-tab title="Home-List" icon-off="ion-ios-list" icon-on="ion-ios-list" ui-sref="tab.home_list">
<ion-nav-view name="tab-home-list" class="nav-tab-3"></ion-nav-view>
</ion-tab>
<ion-tab title="Create" icon-off="ion-plus-round" icon-on="ion-plus-round" ui-sref="tab.create_event">
<ion-nav-view name="tab-create-event" class="nav-tab-4"></ion-nav-view>
</ion-tab>
</ion-tabs>
下一步是填充控制器.在这里,您需要在导航中按顺序列出状态名称表.这是我的代码:
Next step is to fill you controller. Here you need to have to table of states names in order in your nav. Heres my code:
$scope.tabList = [
'tab.notifications',
'tab.profile',
'tab.home_map',
'tab.home_list',
'tab.create_event'
];
$scope.onSwipeLeft = function() {
for(var i=0; i < $scope.tabList.length; i++) {
if ($scope.tabList[i] == $state.current.name && i != $scope.tabList.length){
$state.go($scope.tabList[i+1]);
break;
}
}
};
$scope.onSwipeRight = function() {
for(var i=0; i < $scope.tabList.length; i++) {
if ($scope.tabList[i] == $state.current.name && i != 0){
$state.go($scope.tabList[i-1]);
break;
}
}
};
$scope.$on('$ionicView.enter', function() {
for(var i=0; i < $scope.tabList.length; i++) {
if ($scope.tabList[i] == $state.current.name){
$scope.activeTab = i;
break;
}
}
});
最后是动画和隐藏离子导航视图,您可以在 scss 文件中执行所有操作,如下所示:
Last this is the animation and hidding ion-nav-views, all that you can do in your scss files like this :
.tab-content {
display: block;
opacity: 0;
@include transition-property('left, right');
@include transition-duration(.3s);
}
$tabs-count: 5;
@for $i from 0 through $tabs-count {
@for $j from 0 through $tabs-count {
.active-tab-#{$i} {
@if $i == $j {
.nav-tab-#{$j} {
opacity: 1;
left: 0 !important;
right: 0 !important;
}
}
@if $i > $j {
.nav-tab-#{$j} {
left: -100%;
right: 100%;
}
}
@if $i < $j {
.nav-tab-#{$j} {
left: 100%;
right: -100%;
}
}
}
}
}
所有这些加在一起使它像本机标签应用程序一样工作.我希望我有所帮助这个解决方案对我很有用.
So all that togather make it works like native tab app. I hope I helped, This solutions works great for me.
这篇关于标签模板之间的离子滑动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!