0

今週、モバイル アプリにスワイプを実装しましたが、両方向のスワイプを示す明確なデモは見つかりませんでした。それで、私はコミュニティに少し恩返しをすることにしました。それは、理解できない奇妙な行動に気付くまででした。

デモをテストするために、デモに 2 つのボタンを配置しました。スワイプするには、テキストの横でマウスを使用できます。何が起こるかというと、デモをロードして既存の ngView をスワイプすると、slideDir からクラスが取得されますが、新しいクラスは取得されません。これは、新しいビューに新しいスコープがあり、slideDir がどうあるべきかわからないために発生します。

ケース 2 は、スワイプする前にボタンを押した場合です。slideDir が作成され、ボタンが使用しているスコープに入力されているため、スワイプはほぼ正常に動作し始めます (2 つのスコープ間の同期の問題以外)。

では、私の構成で何が間違っているのでしょうか? 私は、アプリ コントローラーがより高い位置にある div にあるため、新しい ngView が読み込まれるたびにこれが再起動されないと想定していました。

次の URL にデモが含まれています: 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 に答える