ミニプログラムのドロップダウン更新の問題-ミニプログラム開発-php.cn

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

hzc

リリース： 2020-06-22 11:21:08

転載

3522 人が閲覧しました

ミニプログラムでは、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>

ログイン後にコピー

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

スクロールビューの高さを必ず固定してください。そうしないと、リッスンイベントがトリガーされません。

enablePullDownRefreshと比較して、スクロールビューの方が便利です。スクロールリストコントロール:

ミニプログラムのドロップダウン更新の問題 ##カスタマイズされたドロップダウン更新

#自動プルダウン更新の定義で解決したい主な問題は、固定配置されたタイトルバーまたはナビゲーションバーがプルダウンされる問題です。 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:
ミニプログラムのドロップダウン更新の問題

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