0

本周我在一个移动应用程序上实现了滑动，但没有发现清晰的演示显示双向滑动。所以我想回馈社区一点，我会写一个。直到我注意到一些我无法理解的奇怪行为。

我在演示中放了两个按钮来试驾演示。要滑动，您可以在文本旁边使用鼠标。发生的情况是，当我加载演示并滑动已经存在的 ngView 从 slideDir 获取类时，新的却没有。发生这种情况是因为新视图具有新范围并且不知道 slideDir 应该是什么。

情况二是当我在滑动之前按下一个按钮时，在按钮使用的范围内创建并填充了一个 slideDir，因此滑动开始几乎表现得像它应该的那样（除了两个范围之间的一些同步问题）。

那么在我的配置中我做错了什么？我的假设是因为应用程序控制器位于更高的 div 上，所以每次加载新的 ngView 时都不会重新启动。

以下网址包含演示：http ://blackunknown.com/demos/swipingdemo/demo.html

这是我在body标签中的设置：

<div ng-app="app" ng-controller="AppCtrl">
    <button ng-click='swipeLeft()'>Swipe Left</button>
    <button ng-click='swipeRight()'>Swipe Right</button>

    <div class="slide" ng-view ng-class="slideDir" ng-swipe-left="swipeLeft()" ng-swipe-right="swipeRight()">
    </div>

    <!-- Templates loaded on url change -->
    <script type="text/ng-template" id="pg1.html">
        <H3>Slide 1</H3>
    </script>
    <script type="text/ng-template" id="pg2.html">
        <H3>Slide 2</H3>
    </script>
    <script type="text/ng-template" id="pg3.html">
        <H3>Slide 3</H3>
    </script>
</div>

这是我的javascript：

function AppCtrl($scope, $location, viewSlideIndex) {
    $scope.swipeLeft = function(){
        $scope.slideDir = 'slide-left';
    $scope.url = document.URL.substr(document.URL.lastIndexOf('/'));

        if($scope.url == "/pg1"){
            $scope.url = "/pg2";
        }
        else if ($scope.url == "/pg2"){
            $scope.url = "/pg3";
        }
        else if ($scope.url == "/pg3"){
            $scope.url = "/pg1";
        }

        $location.url($scope.url);
    }

    $scope.swipeRight = function(){
        $scope.slideDir = 'slide-right';
        $scope.url = document.URL.substr(document.URL.lastIndexOf('/'));

        if($scope.url == "/pg1"){
            $scope.url = "/pg3";
        }
        else if ($scope.url == "/pg2"){
            $scope.url = "/pg1";
        }
        else if ($scope.url == "/pg3"){
            $scope.url = "/pg2";
        }

        $location.url($scope.url);
    }
};

angular.module('app', ['ngRoute', 'ngAnimate', 'ngTouch'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.when('/pg1', {
        templateUrl: 'pg1.html',
        controller: AppCtrl
    });
    $routeProvider.when('/pg2', {
        templateUrl: 'pg2.html',
        controller: AppCtrl
    });
    $routeProvider.when('/pg3', {
        templateUrl: 'pg3.html',
        controller: AppCtrl
    });
    $routeProvider.otherwise({
        redirectTo: '/pg1'
    });
    $locationProvider.html5Mode(true);
}])
.service('viewSlideIndex', function () {
    var viewIndex;
    return {
        getViewIndex: function () {
            return viewIndex;
        },
        setViewIndex: function (val) {
            viewIndex = val;
        }
    };
});

编辑：要执行实际的滑动，不要使用按钮，而是单击文本旁边的拖动。

4

1 回答 1

1

在您的网站上，您有

$scope.slideDir = 'slide-right';

在顶部AppCtrl。

删除它，它可以工作。您在此处粘贴的代码没有该行并且按预期工作。

于 2014-04-09T22:47:39.763 回答