Semasa membangunkan aplikasi Sudut berbilang tab, saya menghadapi cabaran - cara mengekalkan penatalan apabila pengguna bertukar antara tab. Ciri ini penting untuk mempertingkatkan pengalaman pengguna, memastikan pengguna boleh meneruskan ke tempat mereka berhenti semasa menavigasi antara tab.

Dalam catatan blog ini, saya akan menunjukkan kepada anda langkah demi langkah cara menambahkan fungsi ini pada projek anda. Ini adalah cara yang mudah tetapi berkesan untuk mengekalkan kedudukan tatal tab individu.

Soalan

Secara lalai, pertukaran antara tab biasanya akan memuatkan semula kandungan, sekali gus menetapkan semula kedudukan tatal. Tingkah laku ini boleh mengecewakan pengguna, terutamanya apabila menyemak imbas senarai panjang atau halaman intensif data. Untuk menyelesaikan masalah ini kita perlukan:

1. Simpan kedudukan tatal tab semasa sebelum bertukar.
2. Pulihkan kedudukan tatal apabila pengguna kembali ke tab.

Penyelesaian

Kita boleh menggunakan window.scrollY untuk menangkap kedudukan skrol menegak semasa dan menyimpannya dalam objek keadaan. Apabila pengguna menavigasi kembali ke tab, kami mendapatkan semula dan memulihkan lokasi yang disimpan.

Berikut ialah cara untuk melakukannya langkah demi langkah:

1. Tetapkan pengurusan keadaan menatal

Buat sifat untuk menjejaki kedudukan tatal setiap label.

export class TabComponent {
  activeTab: string = 'tab1';
  tabScrollStates: { [key: string]: number } = {};

  onTabChange(newTab: string): void {
    // 保存活動(dòng)標(biāo)簽的當(dāng)前滾動(dòng)位置
    this.tabScrollStates[this.activeTab] = window.scrollY || 0;

    // 更新活動(dòng)標(biāo)簽
    this.activeTab = newTab;

    // 恢復(fù)新標(biāo)簽的滾動(dòng)位置
    const savedScrollPosition = this.tabScrollStates[newTab] || 0;
    // 延遲滾動(dòng)恢復(fù)以確保DOM已更新為新的標(biāo)簽內(nèi)容
    setTimeout(() => {
      window.scrollTo(0, savedScrollPosition);
    }, 0);
  }
}

2. Sambungkan tag kepada logik

Dalam templat anda, ikat kaedah onTabChange pada acara pemilihan teg.

<div>
  <button (click)="onTabChange('tab1')">Tab 1</button>
  <button (click)="onTabChange('tab2')">Tab 2</button>
</div>

<div *ngIf="activeTab === 'tab1'">
  <p>Tab 1 的內(nèi)容 (這里可以有很多內(nèi)容)</p>
</div>

<div *ngIf="activeTab === 'tab2'">
  <p>Tab 2 的內(nèi)容 (這里也可以有很多內(nèi)容)</p>
</div>

3. Penambahbaikan pilihan

• Debounce:Debounce menghalang berbilang operasi simpan dalam tempoh masa yang singkat, mengurangkan overhed prestasi dan memastikan tingkah laku yang konsisten jika pengguna menukar tab dengan cepat.
• Tatal mendatar: Gunakan window.scrollX untuk mengekalkan tatal mendatar.

const savedHorizontalScroll = window.scrollX || 0;
setTimeout(() => {
  window.scrollTo(savedHorizontalScroll, savedScrollPosition);
}, 0);

Kesimpulan

Dengan menguruskan kedudukan tatal dengan berkesan, anda boleh meningkatkan pengalaman pengguna aplikasi Angular anda dengan sangat baik. Penyelesaian ini ringkas, ringan dan mudah berskala kepada senario yang lebih kompleks.

Adakah anda telah melaksanakan teknik pengurusan skrol yang serupa? Sila kongsi pandangan dan penambahbaikan anda dalam ulasan di bawah!
Selamat mengekod! ?

Atas ialah kandungan terperinci Mengekalkan Keadaan Tatal pada Perubahan Tab dalam Sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!