@Component({ selector: 'ytm-swipers', template: ` <div> <ng-content></ng-content> </div> `, styles: [` .view-body{height: 100%;width: 100%;overflow: hidden;position: relative;} `], providers: [SwiperService] })
然后就是要监听手势滑动事件，做出相应的切换。以及传入一个current变量，每当此变量更新时都要切换到对应id的视图去，实际使用效果就是：
<ytm-swipers [current]="1">...</ytm-swipers>可以将视图切换到id喂1的视图也就是第二个视图。
export class YTMSwiperComponent implements OnChanges { @Input() public current: number; @Output() public onSwiped = new EventEmitter<Object>(); private touchStartX; private touchStartY; constructor(private swiper: SwiperService) { this.current = 0; } public ngOnChanges(sc: SimpleChanges) { if (sc.current && sc.current.previousValue !== undefined && sc.current.previousValue !== sc.current.currentValue) { this.swiper.Skip(sc.current.currentValue).then((id) => { console.log(id); this.onSwiped.emit({current: id, bySwipe: false}); }).catch((err) => { console.log(err); }); } } @HostListener('touchstart', ['$event']) public onTouchStart(e) { this.touchStartX = e.changedTouches[0].clientX; this.touchStartY = e.changedTouches[0].clientY; } @HostListener('touchend', ['$event']) public onTouchEnd(e) { let moveX = e.changedTouches[0].clientX - this.touchStartX; let moveY = e.changedTouches[0].clientY - this.touchStartY; if (Math.abs(moveY) < Math.abs(moveX)) { /** * Y轴移动小于X轴 判定为横向滑动 */ if (moveX > 50) { this.swiper.Prev().then((id) => { // this.current = id; this.onSwiped.emit({current: id, bySwipe: true}); }).catch((err) => { console.log(err); }); } else if (moveX < -50) { this.swiper.Next().then((id) => { // this.current = id; this.onSwiped.emit({current: id, bySwipe: true}); }).catch((err) => { console.log(err); }); } } this.touchStartX = this.touchStartY = -1; } }
此外代码中还添加了一个回调函数，可以再视图完成切换时执行传入的回调，这个使用的是angular的EventEmitter能力。
以上就是全部实现了，实际的使用示例像这样：
<ytm-swipers [current]="0" (onSwiped)="切换回调($event)"> <swiper> 视图1 </swiper> <swiper> 视图2 </swiper> <swiper> 视图3 </swiper> </ytm-swipers>
视图的切换有了两种方式，一是手势滑动，不过没有写实时拖动，仅仅是判断左右滑做出反应罢了，二是更新[current]节点的值。
整个组件的实现没有使用到angular一些比较底层的能力，仅仅是玩弄css样式以及组件嵌套并通过服务交互，以及Input、Output与外界交互。相比之下ionic的那些组件就厉害深奥多了，笔者还有很长的路要走。
以上所述是小编给大家介绍的基于angular实现模拟微信小程序swiper组件，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言小编会及时回复大家的！
您可能感兴趣的文章: