如何加快選擇框的性能？

Question

我試圖在ion-select中顯示一長串國家。目前我正在嘗試加載249個國家/地區。我的手機上的渲染，性能非常慢。

<ion-list margin-top margin-bottom> 
    <ion-item> 
     <ion-label margin-left style="color:#3498db">Country</ion-label> 
     <ion-select margin-right [(ngModel)]="country" okText="Done" placeholder="Select"> 
     <ion-option *ngFor="let item of countries" [value]="item.ccode" [selected]="country == item.ccode">{{item.cname}}</ion-option> 
     </ion-select> 
    </ion-item> 
    </ion-list> 

有什麼方法可以提高渲染性能嗎？

Answer 1

最好的辦法是使用Modal。您還可以在頂部添加一個搜索欄，以便用戶可以輕鬆找到目標國家/地區。以下只是一個簡化的演示（如果您發現任何錯誤，請告訴我，因爲我已經從中刪除了很多不相關的代碼）。

請還會注意到，而不是使用每個國家的ion-list和一個ion-item，我在視圖中使用常規div。這是因爲國家列表是一種很大（〜250），並且使用來自Ionic（基於Angular）的組件的ion-list和ion-item將需要初始化這些組件，然後創建/銷燬它們當你過濾國家。 在演示中，由於它們只是html元素（帶有一些簡單的樣式規則），即使在非常老的移動設備中，性能也非常好。

控制器

// Angular 
import { Component } from '@angular/core'; 

// Ionic 
import { NavParams, ViewController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-country-list', 
    templateUrl: 'country-list.html' 
    }) 
export class CountryListPage { 

    public countries: Array<any>; 
    public countriesToShow: Array<any>; 

    constructor(private paramsCtrl: NavParams, private viewCtrl: ViewController) { 
     // Get the data as a parameter 
     this.countries = paramsCtrl.get('countries'); 

     // Initialize the list of countries to show in the view 
     this.initializeCountriesToShow(); 
    } 

    public initializeCountriesToShow(): void { 
     // Clone the list of countries so we don't modify the original copy 
     this.countriesToShow = [...this.countries]; 
    } 

    public filterCountries(ev: any): void { 
     // Reset countries back to all of the countries 
     this.initializeCountriesToShow(); 

     // Set val to the value of the searchbar 
     let val = ev.target.value; 

     // If the value is an empty string don't filter the countries 
     if (val && val.trim() != '') { 
      this.countriesToShow = this.countriesToShow.filter((country) => { 
       return (country.name.toLowerCase().indexOf(val.toLowerCase()) > -1); 
      }) 
     } 
    } 

    // Method that returns the selected country to the caller 
    public selectCountry(country: any): void { 
     this.viewCtrl.dismiss(country); 
    } 

    // Method that closes the modal without returning anything 
    public close(): void { 
     this.viewCtrl.dismiss(); 
    } 
} 

查看

<ion-header> 
    <ion-navbar color="primary"> 
     <ion-title>Countries</ion-title> 
     <ion-buttons right> 
      <button (click)="close()" ion-button icon-only> 
       <ion-icon color="light" class="close-icon" name="close"></ion-icon> 
      </button> 
     </ion-buttons> 
    </ion-navbar> 
    <ion-toolbar color="primary"> 
     <ion-searchbar placeholder="Type the name here..." (ionInput)="filterCountries($event)"></ion-searchbar> 
    </ion-toolbar> 
</ion-header> 
<ion-content padding> 
    <div class="country-list"> 
     <div tappable (click)="selectCountry(country)" class="country-item" *ngFor="let country of countriesToShow"> 
      {{ country.name }} 
     </div> 
    </div> 
</ion-content> 

樣式

.ios, .md { 
    page-country-list { 

     div.country-item { 
      position: relative; 
      margin-right: 16px; 
      margin-left: 16px; 
      margin-top: 16px; 
      padding-bottom: 16px; 
      border-bottom: 0.55px solid map-get($colors, light); 

      &:last-child { 
       border-bottom: none; 
      } 
     } 

     ion-navbar { 
      .close-icon { 
       font-size: 3.5rem; 
       padding-right: 8px; 
      } 
     } 

    } 
} 

來電組件

然後，爲了顯示模式，你可以做這樣的事情：

constructor(private modalController: ModalController) {} 

// ... 

public showCountryDropdown(): void { 

    // Create the modal 
    let modal = this.modalCtrl.create('CountryListPage'); 

    // Handle the result 
    modal.onDidDismiss(country => { 
     if (country) { 
      // Handle the selected country 
      // ... 
     } 
    }); 

    // Show the modal 
    modal.present(); 
} 

注意：在演示中，我假設每個country項目都有一個屬性name。