VUE Angular通用動態列表元件-亦可為自動輪播元件-02-根據資料量自動橫向滾動,滑鼠劃入停止滾動
阿新 • • 發佈:2021-07-09
本文為橫向輪播,縱向輪播/動態列表元件請戳----
程式碼是angular的,稍微改改就可以放入Vue專案裡,差別不大喲
以下程式碼可以根據實際情況自行調整
父元件html
<app-scroll-left> <div class="slot-one"> <div [style]="{ width: dataObjLeft.width + dataObjLeft.unit }" class="inner_item" *ngFor="let item of dataObjLeft.scrollList,index as i"> {{ item }}嵌入的slot{{ i+1 }} </div> </div> <div class="slot-two"> <div [style]="{ width: dataObjLeft.width + dataObjLeft.unit }" class="inner_item"> {{ dataObjLeft.scrollList[0] }}嵌入的slot2,這裡要放和 slot1裡面第一個畫面一模一樣的東西 </div> </div> </app-scroll-left>
父元件ts
dataObjLeft: any = {
time: 50,
minLength: 1,
width:200,
height: 200,
unit: 'px',
scrollList: ['1111','2222','3333','444','555','666']
}
子元件html
<div class="scroll_outermost" [style]="{ width: dataObj.width + dataObj.unit, height: dataObj.height + dataObj.unit }" #outerMost (mouseover)="rollStop('over')" (mouseout)="rollStart(60)" > <div [style]="{ width: (dataObj.scrollList.length + 1) * dataObj.width + dataObj.unit, height: '100%' }"> <div class="outer_box" [style]="{ width: dataObj.scrollList.length * dataObj.width + dataObj.unit }" #outerBox1> <ng-content select=".slot-one"></ng-content> </div> <div class="outer_box" #outerBox2> <ng-content select=".slot-two"></ng-content> </div> </div> </div>
子元件ts
import { Component, ElementRef, OnInit, Input, ViewChild, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'app-scroll-left', templateUrl: './scroll-left.component.html', styleUrls: ['./scroll-left.component.less'], encapsulation: ViewEncapsulation.Emulated, }) export class ScrollLeftComponent implements OnInit { constructor() { } ngOnInit(): void { } @Input() public dataObj: any = { time: 50, minLength: 1, width:200, height: 200, unit: 'px', scrollList: ['1111','2222','3333','444','555','666'] } @ViewChild('outerMost', { static: false }) outerMost: ElementRef; @ViewChild('outerBox1', { static: false }) outerBox1: ElementRef; @ViewChild('outerBox2', { static: false }) outerBox2: ElementRef; ngAfterViewInit() { setTimeout(()=>{this.roll(this.dataObj.time)},1000) } timer = null ngOnDestroy() { if (this.timer) clearInterval(this.timer); } roll(t) { var outerMost = this.outerMost.nativeElement if (this.dataObj.scrollList.length < this.dataObj.minLength) { return console.log('不需要滾動') } outerMost.scrollLeft = 0; this.rollStart(t); } rollStart(t) { var outerMost = this.outerMost.nativeElement var outerBox1 = this.outerBox1.nativeElement this.rollStop('開始'); this.timer = setInterval(() => { // 當滾動高度大於列表內容高度時恢復為0 outerMost.scrollLeft++; if (outerBox1.scrollWidth - outerMost.scrollLeft === 1) { outerMost.scrollLeft = 0; outerMost.scrollLeft++; } if (outerMost.scrollLeft >= outerBox1.scrollWidth) { outerMost.scrollLeft = 0; outerMost.scrollLeft++; } }, t); } rollStop(e) { console.log(e) clearInterval(this.timer); } }
子元件less
.scroll_outermost {
overflow: hidden; /* 必須 */
cursor: pointer;
.outer_box {
height: 100%;
display: inline-block;
vertical-align: top;
/deep/.slot-one{
height: 100%;
}
/deep/.slot-two{
height: 100%;
}
/deep/.inner_item {
height: 100%;
display: inline-block;
background-color: rgb(235, 210, 243);
}
/deep/.inner_item:nth-child(odd) {
background-color: rgb(179, 223, 248);
}
}
}