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