如何加快选择框的性能？

Posted 2023-03-13

【中文标题】如何加快选择框的性能？

【英文标题】：How to speed up performance of Select Box?

【发布时间】：2018-01-31 12:50:08

【问题描述】：

我试图在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>

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

【问题讨论】：

您从哪里获得249 记录？

@Sampath 来自我的服务器

如果以下解决方案有效，则没有问题。但您也可以寻求缓存解决方案。即您可以将这些国家/地区存储在您的设备上。

【参考方案1】：

最好的方法是使用Modal。您还可以在顶部添加一个搜索栏，以便用户可以轻松找到目标国家。以下只是一个简化的演示（如果您发现任何错误，请告诉我，因为我已经从中删除了很多不相关的代码）。

还请注意，我在视图中使用常规 div，而不是每个国家/地区使用 ion-list 和 ion-item。 这是因为国家/地区列表很友好大（〜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。