ミニプログラムのドロップダウン更新の問題

ミニ プログラムでは、onLoad ライフ フックはページの作成時に 1 回だけ呼び出されます。navigateTo ページ ジャンプを実行した後、上位レベルのページに戻ります。navigateTo ジャンプは現在のページを非表示にするだけなので、onLoad ライフ フックはフックは上位ページに戻ったときに呼び出されます。再度実行されることはありません。ページを高速に表示できる利点がありますが、onLoad 内のリクエスト データはリアルタイムに更新されません。このとき、ページ データを手動で更新するには、プルダウン更新操作が必要です。次に、この記事では、ミニ プログラムでプルダウン更新を実装する 3 つの方法を紹介します

#enablePullDownRefresh

enablePullDownRefresh は、プルダウン更新を実装する最も簡単な方法です。json ファイルで、enablePullDownRefresh を true に設定し、ページ内の onPullDownRefresh イベントを聞くだけです。上部のタイトル バーをクリックして上部に戻ることができます。タイトルバーをカスタマイズする場合は無効になります。また、wx.startPullDownRefresh() を直接呼び出してプルダウン更新アニメーションを生成することで、プルダウン更新イベントをトリガーすることもできます。処理後プルダウン更新のデータが更新された後、呼び出します。 wx.stopPullDownRefresh() を使用してアニメーションを終了します。

この形式のプルダウン更新の利点は、明らかにシンプルで制限がないことですが、欠点も明らかです。

• プルダウンアニメーションが単純すぎて、インタラクションが十分エレガントではありません。ドロップダウン アニメーションはカスタマイズできません
• タイトル バーをカスタマイズすると、位置が固定され、タイトル バーもプルダウンされます。 Android で一緒に

#scroll-view

scroll-view は公式のスクロール ビュー コンポーネントです。使い方はとても簡単です。プルアップ更新コードを設定するためのコードは次のとおりです:

<scroll-view>
  <view>content</view>
</scroll-view>

スクロールを使用する場合 - ビューのプルアップ更新を実装するには、次の点に注意してください:

• スクロール ビューの高さを必ず固定してください。そうしないと、リッスン イベントがトリガーされません。
# 設定 垂直スクロール スクロール y
スクロールビューのコンテンツの高さはスクロールビューの高さより高くなければなりません。そうしないと垂直スクロールが発生せず、リッスンイベントがトリガーされません
scroll- view 欠点:

iOS にはラバーバンド効果があるため、最終的な効果は Android とは多少異なります
最初にページを開いたときの場合、プルアップはプルアップ リスニング イベントをトリガーできません。最初に下にスクロールしてスクロールをトリガーし、次にプルアップして再度スクロールしてリスニング イベントをトリガーする必要があります。
自己がある場合、ヘッドを定義するとき、スクロールビューはヘッドの高さを差し引く高さの計算を必要とします。
スクロールビューの利点:

カスタマイズ可能 アニメーションの読み込み
コードは比較的単純です
• enablePullDownRefreshと比較して、スクロールビューの方が便利です。スクロール リスト コントロール:
  scroll-into-view: 指定した要素までスクロールします。
  enable-back-to-top: iOS では上部のステータス バーをクリックし、Android ではタイトル バーをダブルクリックすると、スクロール バーが上部に戻ります。垂直方向のみがサポートされており、タイトル バーをカスタマイズすると無効になります
公式には、ドロップダウンの更新にスクロールビューを使用することは推奨されていません。公式ドキュメントにはそのようなヒントがあります。

##カスタマイズされたドロップダウン更新

#自動 プルダウン更新の定義で解決したい主な問題は、固定配置されたタイトル バーまたはナビゲーション バーがプルダウンされる問題です。 Android が enablePullDownRefresh を使用すると、プルダウン更新中の両端のアニメーションが一貫したままになります。実際、実装は難しくありません。次に、具体的な実装を見てみましょう: wxml:

<view>
  <view>
    <view></view>
    <text>{{state === 0 ? '下拉刷新' : state === 1? '松开刷新' : '刷新中'}}</text>
  </view>
  <view>
    <slot></slot>
  </view>
</view>

このファイルは、コンポーネントのテンプレートを定義します。タッチ イベントにバインドされているスクロール ビュー パッケージがあり、プルダウン更新時のアニメーションと、スロットのコンテンツを挿入するために使用されます。スクロール リスト

wxss:

.animation {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150rpx;
  margin-bottom: -150rpx;
  background-color: #fff;
}
.loading {
  width: 30rpx;
  height: 30rpx;
  border:6rpx solid #333333;
  border-bottom: #cccccc 6rpx solid;
  border-radius: 50%;
  animation:load 1.1s infinite linear;
      
}
@keyframes load{ 
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

.tip {
  margin-left: 10rpx;
  color: #666;
}

スタイル ファイルこれは特別なことではありません

js:

let lastY = 0 // 上一次滚动的位置
let scale = 750 / wx.getSystemInfoSync().windowWidth // rpx转化比例
Component({
  options: {
    multipleSlots: true
  },
  data: {
    scrollTop: 0,
    translateHeight: 0, // 平移距离
    state: -1
  },
  properties: {
    // 触发下拉刷新的距离
    upperDistance: {
      type: Number,
      value: 150
    }
  },
  methods: {
    // 监听滚动，获取scrollTop
    onPageScroll (e) {
      this.data.scrollTop = e.scrollTop
    },
    touchStart (e) {
      lastY = e.touches[0].clientY
    },
    touchMove (e) {
      let clientY = e.touches[0].clientY
      let offset = clientY - lastY
      if (this.data.scrollTop > 0 || offset  this.data.upperDistance) {
        this.data.state = 1
      }
      this.setData({
        translateHeight: this.data.translateHeight,
        state: this.data.state
      })
    },
    touchEnd (e) {
      if (this.data.translateHeight - this.data.scrollTop * scale > this.data.upperDistance) {
        this.setData({
          translateHeight: 150
        })
        this.triggerEvent('scrolltoupper')
        this.setData({
          state: 2
        })
      } else if (this.data.scrollTop  {
        wx.pageScrollTo({
          scrollTop: 0,
          duration: 0
        })
      })
    }
  }
})

このプルダウン更新コンポーネントで最も重要なことは、スタイル ファイルのタイミングを制御することです。プルダウン リフレッシュの場合、コードは upperDistance を定義することによって具体化され、プルダウン リフレッシュ距離はリフレッシュを実行するかどうかを決定するために使用されます。指をスライドさせると、スライド距離を取得し、translateHeight を蓄積して表示します touchEnd イベントで、スライド距離が設定値に達したかどうかを判定します 設定値に達すると、scrolltoupper イベントを送信して表示することができますそれ以外の場合は、更新が停止されます。

使用法:

<header></header>
<refresh-scroll>
  <view>{{item}}</view>
</refresh-scroll>

Page({
  data: {
    list: []
  },
  onLoad: function () {
    this.refreshScroll = this.selectComponent('#refreshScroll')
    for (let i = 0; i  {
      wx.hideLoading()
    }, 1000)
  },
  refresh: function (e) {
    setTimeout(() => {
      this.refreshScroll.stopRefresh()
    }, 1000)
  }
})

これを使用するときの重要な点は、onPageScroll で取得した値をページに渡し、bindscrolltoupper がscrolltoupper イベントをリッスンし、更新操作を実行してから呼び出します。 stopRefresh を使用して更新を停止し、実際のマシンでテスト結果を確認するために下に来てください:

iOS:

Android:

実機でテストしたところ、パフォーマンスはかなり良好でした。もちろん、これはカスタム プルダウン更新の単純なコンポーネントの例にすぎません。実際のプロジェクトで使用するには、まだ自分で改良する必要があるかもしれません。結局のところ、人によってアプリケーション シナリオは異なります。ここでは単なるアイデアにすぎません。

#概要 #この記事では、プログラムをプルダウンして更新する方法が3つあります。最初の2つはミニプログラムで公式に提供されています。最後の1つは個人的な考えをまとめたものです。また、比較的簡単に書くことができます。これをプロジェクトに適用するには、まだ自分で改良する必要があります。それが誰でもできるようになることを願っています。ドロップダウンの更新をカスタマイズすることでアイデアが得られます。

推奨チュートリアル: 「

WeChat ミニ プログラム

」

以上がミニプログラムのドロップダウン更新の問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。