WeChatアプレットリストのプルダウンリフレッシュとプルアップロードの実装方法の分析

この記事の例では、WeChat アプレット リスト レンダリング機能のリスト プルダウン更新とプルアップ ロードの実装方法を説明します。参考までに皆さんと共有してください。詳細は次のとおりです:

WeChat アプレットには 2017 年 1 月 9 日の特別なラベルがあり、インターネットや友人のサークルですぐに人気になりました。最近、私もデモを書きました。それを試してみるプログラム。 WeChat アプレットは vuejs に似ており、どちらもデータ駆動型のビューと一方向のデータ バインディングであり、そのエクスペリエンスは H5 ページよりもはるかに優れています。これは、WeChat 環境のサポートとすべてのページを同時にロードする処理によるものです。初めて走ったときの時間。この記事では、プルダウンして更新し、上にスワイプして WeChat ミニプログラムリストをロードする方法を共有します。

レンダリング

まず、次の 4 つの図は、左から右に、ダウン更新アニメーション、プルダウン更新結果、上スワイプ読み込みアニメーション、上スワイプ読み込み結果です。プログラム内 データはすべてシミュレートされたデータであり、ネットワーク リクエストは含まれていないため、直接実行できます。

方法 1: スクロールビューコンポーネントを使用して実装します

この実装方法は最終的に選択されなかったので (プルダウン更新にはバグがあるため)、簡単な紹介のみを行います。もちろん、ドロップダウンを更新する必要がない場合は、スクロールしてください。 -view コンポーネントはリストのレンダリングに非常に便利です。公式ドキュメントによると、scroll-view コンポーネントには次のメソッドが統合されており、プログラミングに非常に便利です。

scroll-into-view String 値は特定のサブ要素 ID である必要があり、その要素までスクロールすると、要素の上部がスクロール領域の上部と揃えられます
bindscrolltoupper EventHandle にスクロールするとき上/左にスクロールすると、scrolltoupper event
bindscrollto lower がトリガーされます。 EventHandle 下/右にスクロールすると、scrollto lower イベント
bindscroll EventHandle がトリガーされますevent.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

方法 2:ページに付属する関数

Page() 関数を使用してページを登録します。ページの初期データ、ライフサイクル関数、イベント処理関数などを指定するオブジェクト パラメーターを受け入れます。

1. app.json ページでウィンドウの前景色をダークに設定し、ドロップダウンを許可します

2. list.json ページでドロップダウンを設定します。

"window":{
  "backgroundTextStyle":"dark",
  "navigationBarBackgroundColor": "#000",
  "navigationBarTitleText": "wechat",
  "navigationBarTextStyle":"white",
  "enablePullDownRefresh": true
}

3. onPullDownRefresh を使用して、ユーザーのプルダウン アクションを監視します

注: スクロール ビューをスクロールするとき、ページはリバウンドから防止されるため、スクロール ビュー内でスクロールすることはできません。 onPullDownRefresh をトリガーするため、スクロールビュー コンポーネントの使用時にはページを使用できません。

{
  "enablePullDownRefresh": true
}

4. onReachBottom を使用してページの下部イベントをプルアップします

注: 初めてページに入るとき、ページが 1 つの画面でいっぱいでない場合、onReachBottom はユーザーがアクティブに引き上げた場合にのみトリガーされる必要があります。指を引き上げると、onReachBottom は 1 回だけトリガーされるため、プログラミング時には次の 2 つの点を考慮する必要があります。

onPullDownRefresh: function() {
 wx.showNavigationBarLoading() //在标题栏中显示加载
 let newwords = [{message: '从天而降',viewid:'-1',time:util.formatTime(new Date),greeting:'hello'}].concat(this.data.words);
 setTimeout( ()=> {
   this.setData({
     words: newwords
   })
   wx.hideNavigationBarLoading() //完成停止加载
   wx.stopPullDownRefresh() //停止下拉刷新
  }, 2000)
}

5. アップストローク読み込みアイコンアニメーション

onReachBottom:function(){
  console.log('hi')
  if (this.data.loading) return;
  this.setData({ loading: true });
  updateRefreshIcon.call(this);
  var words = this.data.words.concat([{message: '土生土长',viewid:'0',time:util.formatTime(new Date),greeting:'hello'}]);
  setTimeout( () =>{
    this.setData({
     loading: false,
     words: words
    })
  }, 2000)
 }
})

最終的に添付されたレイアウトコード:

/**
 * 旋转刷新图标
 */
function updateRefreshIcon() {
 var deg = 0;
 console.log('旋转开始了.....')
 var animation = wx.createAnimation({
  duration: 1000
 });
 var timer = setInterval( ()=> {
  if (!this.data.loading)
   clearInterval(timer);
  animation.rotateZ(deg).step();//在Z轴旋转一个deg角度
  deg += 360;
  this.setData({
   refreshAnimation: animation.export()
  })
 }, 2000);
}

関連推奨事項:

JSページを更新する方法まとめ

ボタンクリック後のページ自動更新の問題について

JavaScriptでのページ更新例の詳しい説明

以上がWeChatアプレットリストのプルダウンリフレッシュとプルアップロードの実装方法の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。