Angular Js

Question

Follwing是水平滚动条菜单的图像，我试图用角度js来实现。

使用角度js的$ swipe服务来执行此操作。 能够通过指令ng-swipe-left和ng-swipe-right实现函数调用。

由于我已经为启动中的项目设置了overflow-x：hidden，如何更改css或使菜单在ng-swipe-left或ng-swipe-right处滚动。

欢迎任何其他更好的建议来执行此操作。

尝试通过此Example实现此目标。在ng-swipe-left和ng-swipe-right上，在下面放置/减少计数器，确实必须使菜单栏滚动。

<div ng-swipe-left="prev($event)" ng-swipe-right="next($event)">

提前致谢。

Answer 1

您可以使用ng-class添加滚动效果并显示可以使用$scope.index的菜单。

我添加了一个布尔值来更改菜单的打开方式，因为我不确定你打算如何打开菜单。

如果var openDirRight为真，则菜单选择的索引从0到3（3 =菜单数组的长度）。如果它是假的，则从0变为-3。

稍后您可以添加$state.go('page' + index_with_formatting)以转换到菜单项。

请查看下面的演示或此fiddle。

（这些按钮仅用于在桌面上进行调试，因为我不确定如何触发桌面上的滑动。）

var app = angular.module('myapp', ['ngTouch']);

app.controller('MyCtrl', function MyCtrl($scope) {
    
    var openDirRight = true; // true = swipe left to right shows menu index > 0
    						 // false = swipe right to left shows menu index < 0
    
    var stopActions = function ($event) {
        if ($event.stopPropagation) {
            $event.stopPropagation();
        }
        if ($event.preventDefault) {
            $event.preventDefault();
        }
        $event.cancelBubble = true;
        $event.returnValue = false;
    };

    // Carousel thing
    $scope.index = 0;
    // Hide menu
    $scope.showMenu = false;
    // Links
    $scope.navigation = [{
        title: "Page A",
        href: "#pageA"
    }, {
        title: "Page B",
        href: "#pageB"
    }, {
        title: "Page C",
        href: "#pageC"
    }];
    
    $scope.checkMenuVisibility = function() {
    	$scope.showMenu = openDirRight ? $scope.index > 0 : $scope.index < 0;
    };
    
    $scope.isActive = function(index) {
        return ( (openDirRight ? 1: -1 ) * $scope.index - 1 ) === index;
    };
    
    // Increment carousel thing
    $scope.next = function ($event) {
        stopActions($event);
        $scope.index++;
        // limit index
        if ( openDirRight ) {
            if ( $scope.index > $scope.navigation.length)
                $scope.index = $scope.navigation.length;
        }
        else {
            if ( $scope.index > 0)
                $scope.index = 0;
        }
           
        $scope.checkMenuVisibility();
    };
    // Decrement carousel thing
    $scope.prev = function ($event) {
        stopActions($event);
        $scope.index--;
        // limit index
        console.log($scope.index);
        if ( !openDirRight ) {
            if ($scope.index < -$scope.navigation.length) {
            	console.log('limited to -3');
            	$scope.index = -$scope.navigation.length;
            }
        }
        else if ( $scope.index < 0 ) {
            $scope.index = 0;
        }
        
        $scope.checkMenuVisibility();
    };
});

html, body, #page {
    height: 100%;
    min-height: 100%;
}
.box {
    background-color: #EFEFEF;
    box-shadow: 0 1px 2px #dedede;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.menu {
    /*float: left;*/
    /*min-height:100%;*/
    /*width: 98%;*/
}
.menu ul {
    
}
.menu_item {
    display: inline-block;
    line-height:2;
}
.menu_link {
    display:block;
    padding-left:1em;
}
.menu_link:hover {
    background: #DEDEDE;
}
.menu-grip {
    float:right;
    height:5em;
    line-height:.5;
    padding-top:2em;
    text-align:center;
    width:1em;
}
h1 {
    background:black;
    color:white;
    font-size:1.1em;
    line-height:1.3;
}
.big-swiper {
    font-size: 5em;
    height:3em;
    line-height:3;
    margin:.5em auto;
    text-align:center;
    width:3em;
}
.big-swiper:before {
    content:'<\a0';
    color:#dedede;
    font-weight:700;
}
.big-swiper:after {
    content:'\a0>';
    color:#dedede;
    font-weight:700;
}

.active {
    background-color: blue;
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-touch.js"></script>

<div id="page" ng-cloak ng-app='myapp' ng-controller="MyCtrl" ng-swipe-left="">
     <h1>Angular Swipe Menu</h1>

    <div class="menu-grip box" ng-show="!showMenu" ng-click="showMenu = true">.<br />.<br />.</div>
    <nav class="menu box" ng-show="showMenu"> <!-- ng-swipe-right="showMenu = false">-->
        <ul>
            <li class="menu_item" ng-repeat='nav in navigation track by $index'><a class="menu_link" ng-href="{{nav.href}}" ng-class="{'active': isActive($index)}">{{nav.title}}{{$index}}</a>
            </li>
        </ul>
    </nav>
    <!-- buttons for testing on desktop -->
    <button ng-click="next($event)">swipe right</button>
    <button ng-click="prev($event)" class="pull-right">swipe left</button>
    <div class="big-swiper box" ng-swipe-right="next($event)" ng-swipe-left="prev($event)">{{index}}</div>
    
</div>