2

当用户选择其他选项卡之一时，我试图让 javascript 触发。

我正在使用来自这里的标签栏模板 http://onsenui.io/guide/getting_started.html

我已经尝试了几个小时，甚至可以显示警报，但根本无法让它工作。

我可以在初始应用程序加载/第一个视图时收到警报——这很容易。但是，当用户点击选项卡图标以加载其他视图之一时，我如何让 javascript 运行。

4

1 回答 1

0

在 Onsen UI 1.0.4 中，您不能为选项卡挂钩触摸事件。
为此，您应该创建自定义选项卡并使用它而不是标准选项卡。

例如，ons-tabbar-item2可以定义如下：

angular.module('myApp', ['onsen.directives']);


(function() {
    'use strict';
    var directives = angular.module('onsen.directives'); // no [] -> referencing existing module

    directives.directive('onsTabbarItem2', function(ONSEN_CONSTANTS) {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            require: '^onsTabbar',
            scope: {
                page: '@',
                active: '@',
                icon: '@',
                activeIcon: '@',
                label: '@'
            },
            template:     "<label class=\"topcoat-tab-bar__item no-select\">\n" +
    "    <input type=\"radio\" name=\"tab-bar-{{tabbarId}}\" disabled>\n" +
    "   <button class=\"topcoat-tab-bar__button full\" >\n" +
    "       <i ng-show=\"icon != undefined\" class=\"fa fa-2x fa-{{tabIcon}} {{tabIcon}}\"></i>\n" +
    "       <div class=\"onsen_tab-bar__label\" ng-class=\"{ big: icon === undefined }\">\n" +
    "           {{label}}\n" +
    "       </div>\n" +
    "   </button>\n" +
    "</label>\n" + "",
            link: function(scope, element, attrs, tabbarController) {
                var radioButton = element[0].querySelector('input');

                scope.tabbarId = tabbarController.tabbarId;

                tabbarController.addTabItem(scope);
                scope.tabIcon = scope.icon;
                scope.radioButton = radioButton;
                scope.tapAt = (new Date()).getTime();
                scope.tapCount = 0;

                var elem = element[0];
                elem.hmtimeGesture = Hammer(elem, {prevent_default:true} ).on("touch",function(    event) { 
                    // Here any code
                    scope.setActive();
                });

                scope.setActive = function() {          

                    element.addClass('active');
                    radioButton.checked = true;
                    tabbarController.gotSelected(scope);
                    if (scope.activeIcon) {
                        scope.tabIcon = scope.activeIcon;
                    }
                };

                scope.setInactive = function() {
                    element.removeClass('active');
                    scope.tabIcon = scope.icon;
                };

                scope.isActive = function() {
                    return (element.hasClass('active'));
                }

                if (scope.active) {
                    scope.setActive();
                }

            }
        };
    });
})();

您可以在其中重写

                elem.hmtimeGesture = Hammer(elem, {prevent_default:true} ).on("touch",function(    event) { 
                    // Here any code
                    scope.setActive();
                });

如你所愿。

tab_bar.html 现在正在关注

<ons-tabbar>
<ons-tabbar-item2
      active="true"
      label="Home"
      icon="home"
      page="navigator1.html"></ons-tabbar-item2>
<ons-tabbar-item2
      label="Camera"
      icon="camera"
      page="page2.html"></ons-tabbar-item2>
<ons-tabbar-item2
      label="Settings"
      icon="gear"
      page="page3.html"></ons-tabbar-item2>
</ons-tabbar>

在 Onsen UI 的下一个版本 1.1 或 2.0 中，我们计划准备一个挂钩点以供使用。

于 2014-06-12T08:12:21.837 回答