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

Posted 2023-03-16

【中文标题】如何实现滑动，捕捉移动页面（ionic + angularjs）

【英文标题】：How implement swipe, snap to move page (ionic + angularjs)

【发布时间】：2014-02-28 02:51:07

【问题描述】：

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

我的应用有大约 5 个菜单和类似 google play 商店的设计

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

如何滑动将“新产品”移动到畅销书页面，...（google store play-like）

这是我的路线：

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

但不是动画。

请帮忙解决。非常感谢。

【问题讨论】：

NextMobi，你曾经能够让它工作吗？我希望能够使用 Angular / Ionic 做到这一点。

【参考方案1】：

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

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

【讨论】：

感谢 T.S，但我如何才能使用动态页面。像 ... 幻灯片活动时的事件委托，更新内容，...

【参考方案2】：

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

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）上，否则它将不起作用。