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

问题描述

我是Angular 2的新手，我正在寻找一种方法来为移动用户实现良好的Tab Touch轻扫导航，并将其切换到下一个标签视图.

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实施触摸操作，可以遵循朋克车.

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

插件链接

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

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

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