ホームページ >WeChat アプレット >ミニプログラム開発 >WeChatアプレットリストのプルダウンリフレッシュとプルアップロードの実装方法の分析

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

小云云オリジナル: 2017-12-07 15:59:566583ブラウズ

この記事の例では、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: &#39;从天而降&#39;,viewid:&#39;-1&#39;,time:util.formatTime(new Date),greeting:&#39;hello&#39;}].concat(this.data.words);
 setTimeout( ()=> {
   this.setData({
     words: newwords
   })
   wx.hideNavigationBarLoading() //完成停止加载
   wx.stopPullDownRefresh() //停止下拉刷新
  }, 2000)
}

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

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

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

/**
 * 旋转刷新图标
 */
function updateRefreshIcon() {
 var deg = 0;
 console.log(&#39;旋转开始了.....&#39;)
 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);
}

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

関連記事