angularjs之如何实现滑动、捕捉移动页面(ionic + angularjs)_编程设计

我使用 Ionic 框架和 angularjs 进行开发。

我的应用程序有大约 5 个菜单，设计类似于 Google Play 商店

新产品
畅销书
促销
商店 ...

如何滑动将“新产品”移至畅销书页面，...(Google 商店播放 - 类似)

这是我的路线:

myApp.config(function ($routeProvider, $locationProvider) { 
$routeProvider 
    .when('/', 
        { 
            controller: 'NewProductController', 
            templateUrl: 'app/views/newproduct.html' 
        }) 
    .when('/bestseller', 
        { 
            templateUrl: 'app/views/bestseller.html', 
            controller: 'BestsellerController' 
        }) 
 
    .otherwise({ redirectTo: '/' });

});

我尝试了 ng-swipe-left、ng-swipe-right:

<div ng-swipe-right=goToPage('bestseller')>  
     // new product page 
</div> 
 
$scope.goToPage = function (page) {         
    $location.url(page); 
};

但不是动画。

请帮忙解决。非常感谢。

请您参考如下方法:

我已经可以进行 Angular 滑动(不是使用 ionic ，但我认为这是一个 Angular 问题)。

1)确保您将 ngAnimate 和 ngTouch 作为模块(当然也将它们作为依赖项(js 文件)添加到您的 html 文件中:

angular.module('cbosApp', [ 
      'ngAnimate', //this! 
      'ngTouch', // and this! 
      'ngCookies', 
      'ngResource', 
      'ngSanitize', 
      'ngRoute', 
      'frapontillo.bootstrap-switch'     
    ])

2) 您忘记在语句周围添加引号 (")

<div ng-swipe-right="goToPage('bestseller')">  
 // new product page 
</div>

不要忘记将 $location 作为参数放入 Controller 中!

  angular.module('cbosApp') 
  .controller('SettingsCtrl', function ($scope,$rootScope,$location) {});

如果您按自己的方式操作，那么您的功能在每个 Controller 中都是正确的!

重要提示:如果你测试它，单击和释放单击必须发生在 DOM 元素(此处为 div)上，否则它将无法工作。