angularjs - 如何实现滑动、捕捉移动页面(ionic + angularjs)

Question

我使用 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);
};

但不是动画。

请帮忙解决。非常感谢。

Answer 1

我已经可以进行 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)上，否则它将无法工作。