この記事では、ミニプログラムにプルダウンリフレッシュ機能とプルアップロード機能を実装する方法を紹介します。
リストデータを表示する際、データ量が多い場合や更新が早い場合は、ユーザーの利便性を向上させるためにプルアップ更新やプルダウン読み込み機能を提供する必要があります。経験。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル]
スクロールを使用する場合-view to slide コンポーネントがリストを表示するとき、コンポーネント自体にプルダウンの更新とプルアップの読み込みのためのトリガー関数があります。
<scroll-view class="scroll" scroll-y="{{true}}" upper-threshold="50" bindscrolltoupper="refresh" style="height:700px"> <l-loadmore show="{{upfresh}}" bindscrolltolower="getMore" type="loading" loading-text="拼命刷新中"> </l-loadmore> <l-loadmore show="{{downfresh}}" type="loading" loading-text="拼命加载中"> </l-loadmore>
line-ui フレームワークの紹介
ここではプルダウン更新を使用し、プルアップ読み込み表示コンポーネントは lin-ui フレームワークによって提供されています。 lin-ui フレームワークを導入します:
//在小程序项目目录中执行下面的函数 npm install lin-ui
次に、コンポーネントを導入する必要があるページの json ファイルに導入します
"usingComponents": { "l-loadmore":"/miniprogram_npm/lin-ui/loadmore/index", "l-loading":"/miniprogram_npm/lin-ui/loading/index", },
このようにして、lin-ui コンポーネントが正常に導入されました
js コードの記述
#data: { downfresh:false,//底部加载展示控制 upfresh:false//顶部加载展示控制 },
まず、次のようにするかどうかを設定しますデータ内の読み込みコンポーネントを表示します。デフォルトでは表示されません。
プルダウンして js コードを更新します
//下拉刷新 refresh(){ if(this.data.upfresh){ console.log("还没刷新完成") return; } var that = this; this.setData({ upfresh: true, // upfresh:false }) setTimeout(function() { //updateData为自己的数据更新逻辑代码 that.updateData(true,()=>{ that.setData({ upfresh: false, }); }) // wx.hideLoading(); console.info('下拉刷新加载完成.'); }, 500); }, //更新数据 updateData:function(tail, callback) { var that = this; console.log("updatedata-=-=seea"+that.data.searchValue) wx.request({ url: app.gBaseUrl + 'compony-detail/page', method: 'GET', data: { page: 0, count: 20, componyname:that.data.searchValue }, success: (res) => { this.setData({ componys: res.data }) if (callback) { callback(); } } }) },
プルアップして js を読み込みますコード
/** * 滑动到底部加载更多 */ getMore(){ // downloadingData=this.data.downloadingData if(this.data.downfresh){ console.log("还没加载完成") return; } var that = this; this.setData({ downfresh: true, // upfresh:false }) this.setData({ downloadingData: true // upfresh:false }) setTimeout(function() { that.loadData(true,()=>{ that.setData({ downfresh: false }); }) // wx.hideLoading(); console.info('上拉数据加载完成.'); }, 1000); }, loadData: function(tail, callback) { var that = this; wx.request({ url: app.gBaseUrl + 'compony-detail/page', method: 'GET', data: { page: that.data.componys.length, count: 20, componyname:that.data.searchValue }, success: (res) => { // console.log(JSON.stringify(res.data)) that.setData({ componys: that.data.componys.concat(res.data), }); if (callback) { callback(); } } }) },
プルダウン更新機能とプルアップ読み込み機能は既に実装済みですが、主にスクロールビューのコンポーネント特性を使用して、記録コンポーネントの表示と非表示を制御します。全体的に実装は難しくなく、実際の状況に応じて特定のコードを適切に調整できます。
プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 !
以上がミニ プログラムでプルダウン リフレッシュ機能とプルアップ ロード機能を実装する方法について簡単に説明します。 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。