在 Angular 2 中实现滑动导航的最佳方式是什么? [英] What is the best way to implement swipe navigation in Angular 2?

问题描述

我是 Angular 2 的新手，正在寻找一种方法来为移动用户实现良好的标签触摸滑动导航，并通过滑动过渡到下一个标签视图.

I'm new to Angular 2 and am looking for a way to implement a good tab touch swipe navigation for mobile users with a swipe transition to the next tab view.

到目前为止，我找到了一个名为 angular2-useful-swiper 的包虽然我并不热衷于使用它，因为我最终会提前初始化我的组件，即使它们不在视图中.

So far I've found a package called angular2-useful-swiper although am not to keen on using it as I end up initializing my components early even though they are not in view.

有人知道为 Angular 2 实现基于标签滑动的导航的好方法吗?任何反馈将不胜感激.:)

Does anyone know a good way to implement a tab swipe based navigation for Angular 2? Any feedback will be greatly appreciated. : )

推荐答案

你可以使用HammerJS来实现触摸动作，你可以按照这个plunker 例如.

You can use HammerJS to implement for touch actions, You can follow this plunker for example.

包含hammer.js文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>

或

npm install hammerjs --save

对于hammerjs 的浏览器触摸支持，包括

 <script src="http://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script>
<script>

在 app.module.ts 中导入

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

export class MyHammerConfig extends HammerGestureConfig  {
  overrides = <any>{
    'swipe': {velocity: 0.4, threshold: 20} // override default settings
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [{ 
    provide: HAMMER_GESTURE_CONFIG, 
    useClass: MyHammerConfig 
  }] // use our custom hammerjs config
})

plunker 链接例如

要实现标签 angular2-material 是一个不错的起点，请遵循 这个链接

To implement tabs angular2-material is a good place to start, follow this link

这篇关于在 Angular 2 中实现滑动导航的最佳方式是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！