uniappで遅延読み込みを実装する方法

coldplay.xixi
リリース: 2023-01-13 00:44:15
オリジナル
10035 人が閲覧しました

ユニアプリで遅延読み込みを実装する方法: ライフサイクル関数 [onReachBottom()] を使用して、ページが一番下までスクロールするときに読み込み操作を実行できます。コードは [onReachBottom: function()] です。

uniappで遅延読み込みを実装する方法

#このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、thinkpad t480 コンピューター。

推奨 (無料): uni-app 開発チュートリアル

Uniapp による遅延読み込みの実装方法:

ユニアプリでは、リクエストされたデータを遅延ロードする必要がある場合、

onReachBottom() ライフサイクル関数を使用してページを一番下までスクロールできます。ロード操作を実行します。

ここでの p は、読み込まれるたびに 1 ごとに指定されるページ番号パラメータです。

onLoad() {
// ajax请求
this.ajaxCode(this.per)
},
onReachBottom: function() {
// 下拉懒加载
++this.per;
uni.request({
url: 'https://www.zrzj.com/api/index/homePage',
method: 'get',
data: {
p: this.per
},
success: (res) => {
var next_data = res.data.result
// 加载新数组
this.products = this.products.concat(next_data)
}
})
},
methods: {
ajaxCode(per) {
uni.request({
url: 'https://www.zrzj.com/api/index/homePage',
method: 'get',
data: {
p: per
},
success: (res) => {
var _data = res.data.result
this.products = _data;
}
})
}
}
ログイン後にコピー

関連する無料学習の推奨事項:

プログラミング ビデオ

以上がuniappで遅延読み込みを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート