ミニプログラムでページを更新するプルダウン関数を実装するにはどうすればよいですか?

ミニ プログラムでページを更新するプルダウン関数を実装するにはどうすればよいですか?次の記事では、WeChat アプレット インターフェイスでプルダウン更新を実装する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#WeChat ミニ プログラムでは、プルダウンによるページの更新が基本操作です。現在のページがいっぱいになったら、プルダウンを続けてさらにコンテンツを読み込みます。この機能はミニ プログラムと Web ページの両方で実装できますが、違いは、ミニ プログラム インターフェイスには、システムから呼び出すだけでプルダウン リフレッシュ機能を実装できる API があることです。

WeChat 開発ドキュメントを見ると、enablePullDownRefresh 属性が true に設定されていることがわかります。プルダウンの更新はデフォルトで有効になっています。 EnablePullDownRefresh は、app.json とページの xxx.json に記述できます。この 2 つの違いは、app.json がグローバル プルダウン更新であるのに対し、***.json は単一ページのプルダウン更新であることです。ウィンドウに関する設定を行うことができます このページのウィンドウのパフォーマンスを決定する設定項目ですので、ウィンドウキーを記述する必要はありません。もう 1 つの方法は、scroll-view をリッスンして、プルダウンの更新をカスタマイズすることです。scroll-view には、bindscrolltoupper 属性があります。上/左にスクロールすると、scrolltoupper イベントがトリガーされるため、この属性を使用して実装できます。プルダウンリフレッシュ機能。

両方の方法が利用可能です。最初の方法は比較的シンプルで使いやすいです。結局のところ、いくつかのロジック システムはすでに処理されています。2 番目の方法は、プルをカスタマイズしたい小規模なプログラムに適しています。ダウン リフレッシュ スタイル 電子商取引を説明するときは、システムによって提供される最初のものを使用してください。主な目的は、その使用方法を全員に教えることです。

1. home.json パラメータ設定

enablePullDownRefresh: true

更新するためにプルダウンする必要があるページは、対応する xxx にあります。そのページの json 上記の属性はファイル内で設定されています。この属性の文字通りの意味からも、プルダウンの更新が許可されているかどうかを知ることができます。もちろん、プルダウンを許可するように各設定を設定したくない場合は、更新する場合、グローバル変数 app.json のウィンドウで上記の属性を直接設定できるため、すべてのプロジェクト全体でプルダウン更新が可能になります。システムにはデフォルトではプルダウン更新機能がないため、これを追加する必要があります

home.js

//下拉刷新
onPullDownRefresh:function()
{
wx.showNavigationBarLoading() //在标题栏中显示加载
//模拟加载
setTimeout(function()
{
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
},1500);
},

onPullDownRefresh プルダウン更新イベントの監視については、コード内の詳細を見てください。wx.showNavigationBarLoading() と wx.hideNavigationBarLoading() は小菊の表示と非表示を切り替えます ネットワークリクエストの説明がまだだったので、ネットワーク負荷をシミュレートして setTimeout メソッドを使用しました 時間遅延メソッドを記述します このメソッドは、ネットワーク負荷にかかる時間をシミュレートできますネットワークの読み込みが完了したら、プルダウンの更新 wx.stopPullDownRefresh() を停止する必要があります。

もっと読み込む

もっと読み込む方法は 2 つあります

1. システム API を呼び出します

2. スクロールを監視します。 view、bindscrollto lower スライドをモニターの下に移動します。

処理方法はプルダウン更新とは少し異なりますが、似ています。

home.js

onReachBottom: function () {
console.log(\'加载更多\')
setTimeout(() => {
this.setData({
isHideLoadMore:true,
recommends: [
{
goodId: 7,
name:\'.....\',
url: \'....\',
imageurl:\'......\',
},
{
goodId: 10,
name:\'......\',
url:\'......\',
},
],
})
}, 1000)
}

onReachBottom システムは、底値イベントの監視を提供します。プルダウンの更新と同様に、いくつかのデータもシミュレートし、時間遅延イベント、isHideLoadMore、カスタム値を追加します。ローディング コントロールの表示と非表示を制御するために使用されます。

home.wxml

Loading

プルダウン リフレッシュを実装するメソッドH5 Web ページを模倣できるアプレットは他にもありますが、WeChat アプレットは API インターフェースを使用するため、プルダウン更新機能を実装する際の開発者の負担を軽減できます。

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

以上がミニプログラムでページを更新するプルダウン関数を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。