この記事では、uniapp アプレットの仮想リストとスロットル テクノロジを使用して、プルアップ リフレッシュとプルダウン ロード機能を実現し、同時に大量のデータのレンダリングによって引き起こされるページ フリーズの問題を回避する方法を紹介します。
1. 仮想リスト
uniapp アプレットの開発において、大量のリスト データをレンダリングする必要がある場合、ページ上でスタックしやすくなります。現時点では、仮想リスト テクノロジーを使用してパフォーマンスを最適化できます。
いわゆる仮想リストは、すべてのデータを可視領域と非可視領域の 2 つの部分に分割します。表示領域内のデータのみがレンダリングされ、表示領域以外のデータは一時的にレンダリングされないため、DOM 操作の数が大幅に削減され、レンダリング効率が向上します。
uniapp アプレットで uni-app の uni-scroll-view コンポーネントを使用するには、プラグイン マーケットにインストールする必要があります
<template>
<uni-scroll-view :style="{height: height + 'px'}" @scroll="onScroll">
<ul>
<li v-for="(item, index) in visibleData" :key="index">{
{ item }}</li>
</ul>
</uni-scroll-view>
</template>
<script>
export default {
data() {
return {
// 总数据
data: [],
// 可视区域高度
height: 0,
// 可视区域顶部数据序号
startIndex: 0,
// 可视区域底部数据序号
endIndex: 0,
// 可视区域数据
visibleData: []
};
},
mounted() {
// 初始化数据
this.initData();
// 监听可视区域高度变化
uni.getSystemInfo({
success: (res) => {
this.height = res.windowHeight;
}
});
},
methods: {
initData() {
// 生成大量数据
for (let i = 0; i < 10000; i++) {
this.data.push(`数据 ${
i+1}`);
}
// 初始化可视区域数据
this.visibleData = this.data.slice(0, 30);
this.endIndex = 29;
},
onScroll(e) {
// 滚动事件
const scrollTop = e.detail.scrollTop;
const itemHeight = 50; // 每个数据项高度
const visibleCount = Math.ceil(this.height / itemHeight); // 可见数据项个数
const startIndex = Math.floor(scrollTop / itemHeight); // 开始渲染的数据序号
if (startIndex !== this.startIndex) {
this.startIndex = startIndex;
this.endIndex = this.startIndex + visibleCount - 1;
this.visibleData = this.data.slice(this.startIndex, this.endIndex + 1);
}
}
}
}
</script>
このサンプル コードでは、uni-scroll-view コンポーネントを使用してリストのコンテンツをラップし、実装されたフック関数で合計データと表示領域の高さを初期化し、スクロール イベントをリッスンします。
ユーザーがリストをスクロールすると、スクロール距離と各データ項目の高さに応じて、現在の表示領域に表示されるデータの範囲を計算し、visibleData 配列を更新してレンダリングします。このようにして、可視領域内のデータのみがレンダリングされ、可視領域以外のデータはレンダリングされないため、DOM 操作の数が大幅に削減され、レンダリング効率が向上します。
2、スロットリング
仮想リストを使用してレンダリング効率を最適化することに加えて、スロットル テクノロジを使用して関数の実行頻度を制御し、頻繁な操作によって引き起こされるページ フリーズの問題を回避することもできます。
uniapp アプレットでは、Lodash ライブラリの throttle メソッドを使用してスロットリングを実現できます。まず、スロットリングを使用する必要があるページに Lodash ライブラリをインストールします。
npm install lodash
次に、vue ファイルの Lodash ライブラリに throttle メソッドを導入し、このメソッドを使用して、スロットルする必要がある関数をラップします。
<template>
<view>
<uni-virtual-list :list="list" :item-size="50" :keep-alive="10" class="list">
<view slot="default" class="item">{
{ item.text }}</view>
</uni-virtual-list>
</view>
</template>
<script>
import _ from 'lodash'
export default {
data() {
return {
list: [
{
id: 1, text: 'item 1' },
{
id: 2, text: 'item 2' },
...
]
}
},
created() {
this.throttledScrollHandle = _.throttle(this.scrollHandle, 300)
},
methods: {
scrollHandle() {
// 处理滚动事件
}
},
mounted() {
uni.pageScrollTo({
scrollTop: 0 })
uni.pageScrollTo({
scrollTop: 1000 })
uni.$on('pageScroll', this.throttledScrollHandle)
},
destroyed() {
uni.$off('pageScroll', this.throttledScrollHandle)
}
}
</script>
上記のコードにより、Lodash ライブラリの throttle メソッドを使用してscrollHandle 関数をラップし、関数のスロットルを実現します。ページがマウントされたら、scrollHandle 関数をページ スクロール イベントにバインドし、関数の実行頻度を制御する間隔を設定する必要もあります。
3. プルアップしてリフレッシュし、プルダウンしてロードします
仮想リストとスロットリングに基づいて、プルアップ更新機能とプルダウン読み込み機能を実装できます。このとき、ページのスクロール イベントを監視し、ページの下部または上部にスクロールしたときに対応する操作をトリガーする必要があります。
具体的な実装は以下の通りです。
<template>
<view>
<uni-virtual-list :list="list" :item-size="50" :keep-alive="10" class="list">
<view slot="default" class="item">{
{ item.text }}</view>
</uni-virtual-list>
</view>
</template>
<script>
import _ from 'lodash'
export default {
data() {
return {
list: [
{
id: 1, text: 'item 1' },
{
id: 2, text: 'item 2' },
...
]
}
},
created() {
this.throttledScrollHandle = _.throttle(this.scrollHandle, 300)
},
methods: {
scrollHandle(e) {
const {
scrollTop, scrollHeight, windowHeight } = e.detail
if (scrollTop < 10) {
// 上拉刷新
} else if (scrollTop + windowHeight > scrollHeight - 10) {
// 下拉加载
}
}
},
mounted() {
uni.pageScrollTo({
scrollTop: 0 })
uni.$on('pageScroll', this.throttledScrollHandle)
},
destroyed() {
uni.$off('pageScroll', this.throttledScrollHandle)
}
}
</script>
上記コードでは、ページスクロールイベントe.detailのscrollTop、scrollHeight、windowHeightなどのプロパティを利用して、現在のページが一番下までスクロールしたか、一番上までスクロールしたかを計算し、対応する操作をトリガーすることで、プルアップ更新機能とプルダウン読み込み機能を実現しています。
要約する
要約すると、仮想リスト技術とスロットリング技術の最適化により、uniapp アプレットでプルアップ更新機能とプルダウン読み込み機能を実現し、大量のデータのレンダリングによって引き起こされるページ詰まりの問題を回避し、ページの流暢性と安定性を向上させることができます。