1

我正在使用 XCode 4.2 版和 PhoneGap 1.5.0 版来开发 iOS 应用程序。使用下面的代码，我能够在页面上添加标签栏，但我无法在选择时导航到另一个页面。我使用 PhoneGap 的 NativeControls 插件创建了标签栏。

function onDeviceReady()
{
    Cordova.exec("NativeControls.createTabBar"        
    var options = "bottom";

    window.onorientationchange = function() {
            var orientation = window.orientation;

            switch(orientation) {
                case 0:

                Cordova.exec("NativeControls.showTabBar", options);


                /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events"  */
                document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom).";
                break; 

                case 90:

                Cordova.exec("NativeControls.showTabBar", options);

                document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right).";
                break;

                case -90: 

                Cordova.exec("NativeControls.showTabBar", options);

                document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left).";
                break;

                default:

                Cordova.exec("NativeControls.showTabBar", options);

                document.getElementById("currentOrientation").innerHTML="Now the orientation must be -180. default: case: ";
                break;         
            }//end switch
        }//end window.orientationchange

        Cordova.exec("NativeControls.showTabBar", options);
        Cordova.exec("NativeControls.createTabBarItem", "Wineries", "Wineries", null, "1", options);
        Cordova.exec("NativeControls.createTabBarItem", "Wines", "Wines", "www/Wine.png", "2", {onSelect: function() {location.href = "Review.html" }});
        Cordova.exec("NativeControls.createTabBarItem", "Tours", "Tours", null, "3", options);
        Cordova.exec("NativeControls.createTabBarItem", "Non-Mobile", "Non-Mobile", null, "4", options);

        Cordova.exec("NativeControls.showTabBarItems", "Wineries", "Wines", "Tours", "Non-Mobile"); 
        Cordova.exec("NativeControls.selectTabBarItem", "Wineries");
}

但是此代码根本不适用于更改选择页面。

Cordova.exec("NativeControls.createTabBarItem", "Wines", "Wines", "www/Wine.png", "2", {onSelect: function() {location.href = "Review.html" }});

编辑当我使用以下代码时也会发生同样的情况。我应该在第二页重复相同的代码吗？如果是这样，我应该调用哪个方法？

    function onDeviceReady()
    {            

        var nc = window.plugins.nativeControls;

        nc.createTabBar();
        nc.createTabBarItem("Wineries", "Wineries", "www/grape.png", {onSelect: function() {location.href = "index.html" }});
        nc.createTabBarItem("Wines", "Wines", "www/Wine.png", {onSelect: function() {location.href = "Review.html" }});
        nc.createTabBarItem("Tours", "Tours", "www/tour.png", null);
        nc.createTabBarItem("Non-Mobile", "Non-Mobile", "", null);
        nc.showTabBar();
        nc.showTabBarItems("Wineries", "Wines", "Tours", "Non-Mobile");
        nc.selectTabBarItem("Wineries");
    }
4

2 回答 2

1

刚刚找到解决我的问题的方法。不是为每个选项卡分配一个新的 html 页面，而是将其连接到功能。在每次调用时，它都会相应地更改正文内容。但是，我仍然想知道是否存在任何其他解决方案！

function onDeviceReady()
{            
    var title = "WineWeb";
    nc = window.plugins.nativeControls;

    nc.createTabBar();
    nc.createTabBarItem("Wineries", "Wineries", "www/grape.png", {onSelect: Wineries});
    nc.createTabBarItem("Wines", "Wines", "www/Wine.png", {onSelect: Review});
    nc.createTabBarItem("Tours", "Tours", "www/tour.png", null);
    nc.createTabBarItem("Non-Mobile", "Non-Mobile", "", null);
    nc.showTabBar();
    nc.showTabBarItems("Wineries", "Wines", "Tours", "Non-Mobile");
    nc.selectTabBarItem("Wineries");
}

function Wineries () {

    nc = window.plugins.nativeControls;
    nc.setNavBarTitle("Wineries");
    nc.hideLeftNavButton();

    document.getElementById('Review').style.display='none';
    document.getElementById('Wineries').style.display='block';
    document.getElementById('AboutUs').style.display='none';
}
于 2012-11-21T12:29:29.567 回答
0

我遇到了这个问题，我的解决方法虽然很密集，但还是使用了一个框架，比如backbone.js。我设置了一个路由器，它根据 url 调用各种视图（例如，#newsfeed）。这很有效，因为您可以轻松地将这些视图绑定到模型和模板。

相关代码看起来像这样。这是基于http://blog.viison.com/post/11097185009/how-to-switch-views-using-backbonejs上的完整示例。

var ApplicationRouter = Backbone.Router.extend({

    initialize: function(el) {
        this.el = el;          
        this.newsfeedView = new NewsContentView({template: '#newsfeed-template'});
    },

    onDeviceReady: function() {

        plugins.tabBar.createItem("feed", "", "tabButton:Contacts", {onSelect: function() {location.href = "#newsfeed" }});
    },

    routes: {
        "": "newsfeed",
        "newsfeed": "newsfeed",
    },

    newsfeed: function() {
        console.log('switch to newsfeed');
        this.switchView(this.newsfeedView);
        this.setActiveEntry('#newsfeed');
    },
});
于 2013-11-23T02:50:31.057 回答