8

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

我的应用程序有大约 5 个菜单和设计，如 google play 商店

  • 新产品
  • 畅销书
  • 晋升
  • 店铺 ...

如何滑动将“新产品”移动到畅销书页面，......（谷歌商店播放 - 喜欢）

这是我的路线：

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);
};

但不是动画。

请帮忙解决。太感谢了。

4

2 回答 2

4

我有角度滑动工作（不是离子，但我认为这是一个角度问题）。

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 作为参数放入控制器中！

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

如果您按照自己的方式进行操作，那么在每个控制器中您的功能都是正确的！

重要提示：如果您对其进行测试，则单击和释放单击必须发生在 DOM 元素（此处为 div）上，否则它将不起作用。

于 2014-03-17T12:23:56.547 回答
1

我不认为 Ionic 框架目前提供这样的东西。但是，您可以使用 SlideBox 视图（http://ionicframework.com/docs/angularjs/views/slide-box/）非常接近。

这是一个简单的例子：http ://plnkr.co/edit/FowDzU?p=preview

于 2014-02-08T14:27:15.577 回答