第一篇文章在这里,但真的很感谢在此方面的一些帮助或建议:
我目前正在使用ionic框架构建一个项目,并且在构建了功能版本之后,我决定能够在选项卡之间滑动以显示应用程序的各个部分。
我使用ionic提供的选项卡模板构建了应用程序,因此每个页面都通过ion-nav-view元素显示,并且是通过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');
});
我想知道的是 有没有一种方法可以允许用户左右滑动以在不同页面之间切换?
可能吗 如果是这样,是否还需要滚动?
我希望这是足够的细节,否则我将乐意提供尽可能多的细节。谢谢收听!
是的,这是可能的。我玩了选项卡模板,得出以下结果:
<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);
}
}
})
我不知道这是否是最佳做法并且是否非常可靠。就像我说的那样,我在阅读了文档后才玩了一会儿。
希望我给您一个关于它如何工作的想法。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句