UniApp のスクロール リストと無限ロードを実装するための最適化戦略

スクロール リストと無限ロードを実装するための UniApp の最適化戦略

モバイル アプリケーションの開発に伴い、スクロール リストと無限ロードがモバイル アプリケーションの一般的な機能要件になりました。 UniApp は、クロスプラットフォームのアプリケーション開発フレームワークとして、同時に複数のプラットフォームに適応できるため、スクロール リストと無限ロードのサポートも開発者の焦点の 1 つになっています。この記事では、UniApp でスクロール リストと無限ロードを実装するための最適化戦略を紹介し、対応するコード例を示します。

1. ローリング リストの実装

UniApp では、ローリング リストの実装は、リストの表示とスクロールを実現できる uni-list コンポーネントに基づいています。スクロール効果を最適化するために、次の最適化戦略を使用できます。

1. ページ単位のデータ読み込み

リスト データが多すぎる場合、すべてのデータを一度に読み込むと読み込み時間が長くなり、ユーザーに深刻な影響を与えます。経験。この問題を解決するために、ページング データ ロードの戦略を採用できます。つまり、ページが最初にロードされるときは、データの一部のみが表示用にロードされ、ユーザーがリストの一番下までスクロールすると、次のページのデータがロードされます。

<template>
  <view>
    <uni-list :data="listData" :total="total" :page-size="pageSize" @loadmore="loadMore">
      <view slot="default" v-for="(item, index) in listData" :key="index">{{ item }}</view>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 列表数据
      total: 0, // 总数据量
      pageSize: 10, // 每页数据量
      currentPage: 1 // 当前页码
    };
  },
  mounted() {
    // 页面初次加载时加载第一页的数据
    this.loadData();
  },
  methods: {
    loadData() {
      // 模拟异步请求数据
      setTimeout(() => {
        // 更新列表数据与总数据量
        this.listData = this.listData.concat(fakeData); // 假设fakeData为每页的数据
        this.total = 100; // 假设总数据量为100
      }, 500);
    },
    loadMore() {
      if (this.currentPage * this.pageSize < this.total) {
        this.currentPage += 1;
        this.loadData();
      }
    }
  }
};
</script>

2. スロットルと手ぶれ補正

スクロール リストの最適化では、ユーザーの頻繁なスクロールによって引き起こされるパフォーマンスの問題も考慮する必要があります。スクロール イベントのトリガーの数を減らすために、スロットリングと手ぶれ防止戦略を使用できます。スロットリングとは、関数が特定の時間間隔内で 1 回だけトリガーされることを意味し、アンチシェイクとは、関数が特定の時間間隔内で複数回トリガーされた場合に、最後の回のみが実行されることを意味します。 UniApp では、wx.createSelectorQuery メソッドを使用してスクロール コンテナに関する情報を取得することが多く、スクロール イベントのアンチシェイクやスロットルを設定することでスクロール リストのパフォーマンスを最適化できます。

<template>
  <view>
    <uni-scroll-view :scroll-top="scrollTop" @scroll="scrollHandler">
      <view slot="default" v-for="(item, index) in listData" :key="index">{{ item }}</view>
    </uni-scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 列表数据
      scrollTop: 0 // 滚动位置
    };
  },
  mounted() {
    // 页面初次加载时即加载全部数据
    this.loadData();
  },
  methods: {
    loadData() {
      // 模拟异步请求数据
      setTimeout(() => {
        // 更新列表数据
        this.listData = fakeData; // 假设fakeData为全部数据
      }, 500);
    },
    scrollHandler(e) {
      if (this.throttleTimeout) clearTimeout(this.throttleTimeout);
      this.throttleTimeout = setTimeout(() => {
        this.scrollTop = e.detail.scrollTop;
        if (this.scrollTop < 10 && this.listData.length < fakeData.length) {
          this.loadData();
        }
      }, 100);
    }
  }
};
</script>

2. 無限ロードの実装

無限ロードとは、ユーザーのスクロールに合わせて新しいデータを自動的にロードできるように、リストの下部にあるデータを動的にロードする機能を指します。無限ロードを実現するには、次の最適化戦略を採用できます。

1. 次ページのプリロード

リストの最後の項目が表示されたら、ユーザーを待たせずに次のページのデータを事前にロードします。ユーザーが一番下までスクロールすると、次のページのデータが直接表示され、長い読み込み時間を回避できます。

<template>
  <view>
    <uni-list :data="listData" @loadmore="loadMore" :is-finished="isFinished">
      <view slot="default" v-for="(item, index) in listData" :key="index">{{ item }}</view>
  </uni-list>
</view>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 列表数据
      isFinished: false, // 数据是否加载完毕
      currentPage: 1 // 当前页码
    };
  },
  mounted() {
    // 页面初次加载时加载第一页的数据
    this.loadData();
  },
  methods: {
    loadData() {
      // 模拟异步请求数据
      setTimeout(() => {
        // 更新列表数据
        this.listData = this.listData.concat(fakeData); // 假设fakeData为每页的数据
        // 当没有更多数据时，设置isFinished为true
        if (this.listData.length >= totalData.length) {
          this.isFinished = true;
        }
      }, 500);
    },
    loadMore() {
      if (!this.isFinished) {
        this.currentPage += 1;
        this.loadData();
      }
    }
  }
};
</script>

2. 繰り返しロードの防止

同じデータのバッチが繰り返しロードされるのを避けるために、データのロード イベントが再トリガーされる前に、データのロード イベントが再度トリガーされることを禁止する必要があります。リクエストが完了しました。 UniApp では、フラグを設定することでデータがロードされているかどうかを判断できます。

<template>
  <view>
    <uni-scroll-view :scroll-top="scrollTop" @scrolltolower="scrollToLower">
      <view slot="default" v-for="(item, index) in listData" :key="index">{{ item }}</view>
    </uni-scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 列表数据
      scrollTop: 0, // 滚动位置
      isLoading: false // 是否正在加载数据
    };
  },
  mounted() {
    // 页面初次加载时即加载全部数据
    this.loadData();
  },
  methods: {
    loadData() {
      if (this.isLoading) return;
      this.isLoading = true;
      // 模拟异步请求数据
      setTimeout(() => {
        // 更新列表数据
        this.listData = fakeData; // 假设fakeData为全部数据
        this.isLoading = false;
      }, 500);
    },
    scrollToLower() {
      if (this.isLoading) return;
      this.loadData();
    }
  }
};
</script>

結論:

スクロールリストと無限ロードはモバイルアプリケーションでは非常に一般的であり、ユーザーエクスペリエンスを向上させるために非常に重要です。 UniApp の最適化戦略を通じて、機能を確実に実現しながら、アプリケーションのパフォーマンスとユーザー エクスペリエンスを向上させることができます。この記事で紹介した UniApp のスクロール リストと無限ロードの最適化戦略が開発作業に役立つことを願っています。

以上がUniApp のスクロール リストと無限ロードを実装するための最適化戦略の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。