ミニ プログラムはページにデータをロードする機能をどのように実装しますか?

ミニ プログラムはページにデータをロードする機能をどのように実装しますか?次の記事で紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

QQ、Weibo、ニュースなどの大量のデータを含むアプリケーションを使用する場合、ページ読み込み機能によく遭遇しますが、これは幅広いアプリケーションシナリオを備えているだけでなく、効率性も高く、ユーザーエクスペリエンスも優れています。 WeChat ミニ プログラムでは、ページにデータを読み込むこともできます。この記事では、WeChat ミニ プログラムでページ読み込みデータを作成する方法 を紹介します。

このような関数を実装するには、通常、データをリクエストするときにリクエストされている現在のページ数と、ページのサイズ (各ページに表示される数) を追加する必要があります。一部のインターフェイスでは、start も使用します。リクエストのオフセットと終了オフセット 大量のデータをリクエストする たとえば、1 ページに 10 個のデータを表示する場合、最初のリクエスト (最初のページ) は 0 で始まり、0 で終わります。 9. 2 ページ目は 10 から 19 までになります。ページング読み込み機能を実装したいので、最も重要なことはプルダウンとプルアップの処理イベントです。プルアップとプルダウンのトリガー イベントは、次のように WeChat アプレットにカプセル化されています。

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},

おそらく、あなたは WeChat アプレットを初めて使用するでしょう。プログラム愛好家は、なぜプルアップ関数とプルダウン関数を書き換える必要があるのに、プルアップまたはプルダウン時に関数がコールバックしないのはなぜなのかという疑問に遭遇するでしょう。 ?パニックにならないでください。これら 2 つの関数を書き直すことに加えて、次のコードも JSON 構成ファイルに追加する必要があるからです。

{
enablePullDownRefresh: true
}

上記のコードでは、プルアップまたはプルダウンするたびに、対応するコードがトリガーされます。対応する関数。

data にデータを作成します

data: {
page: 1,
pageSize: 30,
hasMoreData: true,
contentlist: [],
},

page は現在データが要求されているときのページ、pageSize は各ページのデータのサイズ、hasMoreData はプルアップに使用されます、必要ですかリクエストを続行しますか? データ、つまり、さらにデータがありますか?ネットワーク リクエスト データが成功したとき、リクエストされたデータの長さが pageSize: 30 未満の場合は、これ以上データがないことを意味し、hasMoreData を false に変更します。リクエストされたデータの長さが 30 の場合は、さらにデータがあることを意味します。 hasMoreData が永続的に変更されます。が true で、ページ番号 page が 1 増加します。ページがプルダウンされると、最初にページが 1 に変更され、次にデータがクエリされます。データ クエリが成功した場合、ページが 1 の場合、取得したデータはコンテンツリストに直接割り当てられ、ページの数が 1 より大きい場合、要求されたデータはコンテンツリストに追加されます。このようにして、ページロード機能を実現することができる。

上記の分析により、ページング読み込みの実装が明確に理解できたので、次にコードの実装を紹介します。

getMusicInfo: function (message) {
var that = this
var data = {
showapi_appid:\'25158\',
showapi_sign:\'c0d685445898438f8c12ee8e93c2ee74\',
keyword: \'我\',
page:that.data.page
}
network.requestLoading(\'https://route.showapi.com/213-1\', data, message,function (res) {
console.log(res)
var contentlistTem= that.data.contentlist
if(res.showapi_res_code == 0) {
if(that.data.page == 1) {
contentlistTem= []
}
var contentlist =res.showapi_res_body.pagebean.contentlist
if(contentlist.length < that.data.pageSize) {
that.setData({
contentlist:contentlistTem.concat(contentlist),
hasMoreData:false
})
} else {
that.setData({
contentlist:contentlistTem.concat(contentlist),
hasMoreData:true,
page:that.data.page + 1
})
}
} else {
wx.showToast({
title: res.showapi_res_error,
})
}
}, function (res) {
wx.showToast({
title: \&#39;加载数据失败\&#39;,
})
})
},

上記の関数は、楽曲リスト情報を取得するためのリクエスト処理ロジックです。この関数にはパラメータメッセージがあり、データロード時にプロンプ​​ト情報を表示するために使用されます。たとえば、プルダウンの場合、プロンプト情報が表示されます。データを更新しています。プルアップすると、さらにデータをロードしていることを示すメッセージが表示されます。

次に、ページに入ると、次のように onLoad 関数で一度データの読み込みを開始します。

onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var that = this
that.getMusicInfo(\'正在加载数据...\')
},

次に、プルアップ関数とドロップダウン関数の実装です。

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function () {
this.data.page = 1
this.getMusicInfo(\'正在刷新数据\')
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
if(this.data.hasMoreData) {
this.getMusicInfo(\'加载更多数据\')
} else {
wx.showToast({
title: \'没有更多数据\',
})
}
},

ページング機能は、ユーザーにコンテンツをより適切に表示し、ユーザーを維持することができます。現在、ミニ プログラムは、ユーザーが情報を取得するための新しいチャネルです。多くのミニ プログラムは、既にページング機能を備えています。この機能を実装するには、データを組み合わせるのが最善です。不適切な取り扱いにより、データの損失や不要な損失が発生しやすくなります。

推奨事項: 「 ミニ プログラム開発チュートリアル 」

以上がミニ プログラムはページにデータをロードする機能をどのように実装しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。