Der Inhalt, der in diesem Artikel mit Ihnen geteilt wird, befasst sich mit der Analyse der Kapselung der Bildlauflistenkomponente in Angular 6. Er hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.
Lernen sollte ein Prozess der Kombination von input
und output
sein, weshalb dieser Artikel geschrieben wurde.
Bildlauflisten werden häufig in Web-APPs mit großem Bildschirm verwendet. Nach mehreren Versuchen kam ich auf eine ziemlich gute Idee.
Der Kopfteil des Listenkopfes ist stationär, während der Tbody-Teil nach oben scrollt.
Nachdem das Scrollen des Tbody-Teils abgeschlossen ist, müssen die Daten aktualisiert werden. Der letzte Effekt besteht darin, alle relevanten Daten in der Datenbank in einer nach oben scrollenden Form anzuzeigen.
Wenn die Datenmenge relativ gering ist, können wir alle Daten auf einmal herausnehmen und zum kreisförmigen Scrollen in das DOM einfügen. Tatsächlich ähnelt es dem Effekt eines Karussells.
Aber wenn viele Daten vorhanden sind, kann dies zu einem Speicherverlust führen. Natürlich können wir uns auch eine Paginierung der Listendaten vorstellen. Meine ursprüngliche Idee bestand darin, ein table
als Container in die äußere Schicht von p
einzufügen und dann table
den Wert von top
regelmäßig zu erhöhen. Wenn table
zur Hälfte ausgeführt wird, fordern Sie Daten vom Backend an und erstellen Sie es dynamisch. Eine Komponente tbody
wird in table
eingefügt und dann wird die Komponente gelöscht, wenn die vorherige tbody
nicht mehr sichtbar ist. Die Idee schien machbar, doch in der Praxis stieß sie auf Probleme. Wenn die vorherige Komponente löscht, wird die Höhe von table
verringert und der Tisch fällt sofort um. Das ist offensichtlich nicht das, was wir wollen, und die Nebenwirkungen sind ziemlich schwerwiegend.
In diesem Fall habe ich tbody
in zwei table
s und die beiden table
-Schleifen aufgeteilt. Wenn unter dem vorherigen table
keine Daten vorhanden sind, beginnt das zweite table
zu laufen. Wenn das erste table
vollständig aus p
herauskommt, setzen Sie seine Position auf das untere Ende von p
zurück und aktualisieren Sie das Daten und wiederholen Sie dann die Aktionen dazwischen. Es ist etwas mühsam, es fertigzustellen, aber der Effekt ist passabel und zufriedenstellend. Das Problem ist, dass die beiden Timer instabil sind. Wenn ich eine andere Software öffne und zurückkomme, laufen die beiden Tabellen inkonsistent. Diese angeborene Krankheit setInterval
ist nicht genau genug und die beiden Timer neigen zu einer schlechten Koordination.
Auf dem Heimweg von der Arbeit fiel mir schließlich eine Methode ein, die keine zwei Tische erfordert. Verwenden Sie nur einen table
Timer, um nach oben zu gelangen. Wenn Sie die Hälfte geschafft haben, löschen Sie den Timer, setzen Sie die Position zurück und aktualisieren Sie die Hälfte der Daten. Das heißt, die erste Hälfte der Daten im Array wird entfernt und die aus dem Hintergrund gezogenen neuen Daten werden auf das Array gespleißt. Auf diese Weise können die Daten kontinuierlich aktualisiert werden, und table
es sieht so aus, als würden sie immer weiter steigen.
<p class="table-container"> <table class="head-show"> <thead> <tr> <th style="width:12.8%;">字段1</th> <th style="width:12.8%;">字段2</th> <th>字段3</th> <th style="width:12.8%;">字段4</th> </tr> </thead> </table> <p class="scroller-container"> <table #scroller class="scroller"> <tbody> <tr *ngFor="let ele of tbody"> <td style="width:12.8%;">{{ele.field01}}</td> <td style="width:12.8%;">{{ele.field02}}</td> <td><p>{{ele.field03}}</p></td> <td style="width:12.8%;">{{ele.field04}}</td> </tr> </tbody> </table> </p> </p>
import { Component, OnInit, ViewChild, ElementRef, Input } from '@angular/core'; import { HttpService } from '../http.service'; @Component({ selector: 'app-scroll-table', templateUrl: './scroll-table.component.html', styleUrls: ['./scroll-table.component.scss'] }) export class ScrollTableComponent implements OnInit { tbody: any = []; @Input() url; //将地址变成组件的一个参数,也就是输入属性 //控制滚动的元素 @ViewChild('scroller') scrollerRef: ElementRef; timer: any; freshData: any; pageNow = 1;//pageNow是当前数据的页码,初始化为1 constructor(private http: HttpService) {} ngOnInit() { //初始化拿到native let scroller: HTMLElement = this.scrollerRef.nativeElement; this.http.sendRequest(this.url).subscribe((data :any[]) => { this.tbody = data.concat(data); }); //开启定时器 this.timer = this.go(scroller); } getFreshData() { //每次请求数据时,pageNow自增1 this.http.sendRequest(`${this.url}?pageNow=${++this.pageNow}`).subscribe((data:any[]) => { if(data.length<10) { //数据丢弃,pageNow重置为1 this.pageNow = 1; } this.freshData = data; }); } go(scroller) { var moved = 0, step = -50, timer = null, task = () => { let style = document.defaultView.getComputedStyle(scroller, null); let top = parseInt(style.top, 10); if (moved < 10) { if(moved===0) { this.getFreshData(); } scroller.style.transition = "top 0.5s ease"; moved++; scroller.style.top = top + step + 'px'; } else { //重置top,moved,清除定时器 clearInterval(timer); moved = 0; scroller.style.transition = "none"; scroller.style.top = '0px'; //更新数据 this.tbody = this.tbody.slice(10).concat(this.freshData); timer = setInterval(task,1000); } }; timer = setInterval(task, 1000); } }
.table-container { width: 100%; height: 100%; } .head-show { border-top: 1px solid #4076b9; height: 11.7%; } .scroller-container { border-bottom: 1px solid #4076b9; //border: 1px solid #fff; width: 100%; //height: 88.3%; height: 250px; box-sizing: border-box; overflow: hidden; position:relative; .scroller { position: absolute; top:0; left:0; transition: top .5s ease; } } table { width: 100%; border-collapse: collapse; table-layout: fixed; //border-bottom:1px solid #4076b9; th { border-bottom:1px dashed #2d4f85; color:#10adda; padding:8px 2px; font-size: 14px; } td { border-bottom: 1px dashed #2d4f85; font-size: 12px; color:#10adda; position: relative; height: 49px; p{ padding:0 2px; box-sizing: border-box; text-align:center; display: table-cell; overflow: hidden; vertical-align: middle; } //border-width:1px 0 ; } }
Dies hat zur Folge, dass die Komponente nur einen Parameter übergeben mussurl
und dann werden alle Vorgänge, einschließlich der Aktualisierung von Daten, von der Komponente selbst abgeschlossen. Dies vervollständigt die Komponentenkapselung und erleichtert die Wiederverwendung.
1. Aktualisierungsdaten sollten an der Quelle aktualisiert werden, das heißt, es dürfen keine DOM-Elemente hinzugefügt oder gelöscht werden. Dieser Vorgang ist mühsam und die Leistung ist gering. Wenn man es an der Quelle platziert, muss man sich um das Array kümmern, das die Anzeigedaten in der Komponentenklasse speichert.
2. Im Hintergrund angeforderte neue Daten sollten im Voraus vorbereitet und in einem anderen temporären Array abgelegt werden. Es entspricht einem Cache und einem temporären Register.
3. Ich stelle mir die Komponente als Funktion vor. Sie hat nur einen Parameter, nämlich die Adresse der Daten. Solange dieser Parameter vorhanden ist, kann die Komponente normal funktionieren und ist von keinem anderen Wert abhängig. Lose Kupplung.
4. Stärken Sie die Idee der funktionalen Programmierung. Obwohl dies das Merkmal von React
ist, bin ich immer der Meinung, dass angular
auch verwendet werden kann.
Verwandte Empfehlungen:
In AngularJs Was ist die Beziehung zwischen Modell, Controller und Ansicht? (Bilder und Text)
Das obige ist der detaillierte Inhalt vonAnalyse der Kapselung der Bildlauflistenkomponente in Angular 6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!