ionic 分頁查詢

前言

最近在做項目時候遇到這樣一個功能,就是把所有的單詞展示出來,單詞的數量大概是3000個左右,一下子查出來,然後遍歷在界面上一共大約需要10秒左右,這樣的速度肯定是不行的,數據是從Redis中拿出來的速度一定不慢,但是時間耗在了把這3000條數據遍歷到界面上,所以這裏需要一個分頁的功能,下面分享一下ionic 怎麼實現分頁

過程

1. 首先使用的官方提供的組件ion-infinite-scroll
2. 然後直接在html頁應用組件ion-infinite-scroll

    <ion-infinite-scroll threshold="15%" (ionInfinite)="loadData($event)">
      <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="努力加載中...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>

解釋一下 threshold=“15%” 是拉倒還剩15%時候觸發該時間,(ionInfinite)="loadData($event)這個是響應ts中的分頁方法,loadingSpinner=“bubbles” loadingText=“努力加載中…” 這個是加載一個旋轉的圖標,後面是配上的文字

3. TS代碼

loadData(event: any) {
    setTimeout(() => {
      event.target.complete();
      // 如果加載的頁數和記錄的總頁數相等則表示記錄已經全部顯示，禁用無線滾動
      if (this.page === 500) {
        event.disabled = true;
      } else {
        this.page++;
        // 每次清空下來的數據，page++
        this.dataSettemp = [];
        this.page++;
        // 這裏是你分頁的方法,這裏提供一個思路 就是把你查出來的臨時結果,遍歷添加到你的現有的列表上
          } else {
            super.showToast(this.toastController, '抱歉,服務跑路了~,正在去追');
          }
        });
      }
    }, 800);
  }

效果圖

總結

在Redis裏做分頁不太好做,也是因爲技術的限制,所以只好在數據庫中做分頁,在Redis中拿數據,這樣熟讀就相當的快了,用戶體驗就好了,對服務器的壓力也小了,所以說代碼還是優雅一點比較好!