Question

我使用Ionic框架和angularjs开发。

我的应用程序有大约5个菜单和设计，如谷歌游戏商店

新产品
，绫
促销
商店 ...

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

这是我的路线：

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

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

1）确保你有ngAnimate和ngTouch作为一个模块（当然也将它们作为依赖项（js文件）添加到你的html文件中：

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

2）你忘了引用（＆＃34;）你的陈述

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

不要忘记将$ location作为参数放在你的控制器中！

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

如果你按照自己的方式行事，你的功能是正确的！

重要提示：如果你测试它，点击和释放点击必须发生在DOM元素（div这里），否则它将无法工作。

Answer 2

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

以下是一个简单示例：http://plnkr.co/edit/FowDzU?p=preview

如何实现滑动，捕捉移动页面（离子+ angularjs）

2 个答案: