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。

如何加快Select Box的性能？

1 个答案: