angular - 如何加快选择框的性能？

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 在 View 中。 那是因为国家列表有点大 (~250)，并且使用 ion-list 和 ion-item是来自 Ionic(基于 Angular)的组件将需要初始化这些组件，渲染它们，然后在每次过滤国家时创建/销毁它们。 在演示中，由于它们只是 html 元素(具有一些简单的样式规则)，即使在非常老旧的移动设备上，性能也非常出色。

Controller

// 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。