发布于 2019-01-02 13:16:43
有没有其他方法可以像这样做图像旋转木马?
是
不使用jquery/javascript,只使用Typescript -我能做到这一点吗?
是的( TypeScript是JavaScript的超集,您仍然需要与DOM进行交互,但确实如此)
一个简单实现的,它的行为、外观和感觉都很符合您的需求。(例如,可以向其传递Material Card
components)。
它基本上是这样工作的:您给出了SliderComponent
DOM元素(SliderItemDirectives
),当您单击鼠标右键时,它会将当前最左侧元素的宽度添加到滑块容器的滚动位置。单击左侧减去宽度。我使用了ContentChildren
和ViewChild
来获得widths和scrollLeft
属性。动画是通过css scroll-behavior: smooth;
实现的。
以下是主要组件:
import { Component, AfterContentInit, ContentChildren, ViewChild, QueryList, ElementRef } from '@angular/core';
import { SliderItemDirective } from './slider-item.directive';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements AfterContentInit {
@ContentChildren(SliderItemDirective, { read: ElementRef }) items
: QueryList<ElementRef<HTMLDivElement>>;
@ViewChild('slides') slidesContainer: ElementRef<HTMLDivElement>;
private slidesIndex = 0;
get currentItem(): ElementRef<HTMLDivElement> {
return this.items.find((item, index) => index === this.slidesIndex);
}
ngAfterContentInit() {
console.log('items', this.items);
}
ngAfterViewInit() {
console.log('slides', this.slidesContainer);
}
onClickLeft() {
this.slidesContainer.nativeElement.scrollLeft -= this.currentItem.nativeElement.offsetWidth;
if (this.slidesIndex > 0) {
this.slidesIndex--;
}
}
onClickRight() {
this.slidesContainer.nativeElement.scrollLeft += this.currentItem.nativeElement.offsetWidth;
if (this.slidesIndex < this.items.length - 1) {
this.slidesIndex++
}
}
}
发布于 2018-12-27 17:32:16
有许多解决方案可以满足您的需求,下面是最简单的一个:
像这样组织你的组件:
<component>
<div class="wrapper">
<card>
<card>
<card>
...
<card>
</div class="wrapper">
</component>
使用CSS隐藏组件x轴上的溢出,然后在单击按钮时以编程方式添加和减去包装上的左边距。
您可以使用@ViewChild来获取组件类中的包装器,这样就可以操作它的CSS值
https://stackoverflow.com/questions/53942415
复制相似问题