scrpll-view コンポーネントを使用して uniapp でプルダウン更新を実装する方法

scrpll-view コンポーネントを使用して uniapp でプルダウン更新を実装するにはどうすればよいですか?次の記事では、スクロールビューを使用して uniapp のプルダウンの更新をカスタマイズする方法を紹介します。

#uniapp プルダウン更新

uniapp でのプルダウン更新には 2 つの方法があります。1 つは全体的なプルダウン更新では、ページ ライフ サイクル関数 onPullDownRefresh を使用します。もう 1 つは、scrpll-view コンポーネントのカスタム プルダウン更新イベントを使用するローカル プルダウン更新 (カスタム プルダウン更新とも呼ばれます) です。

1. ページ全体を更新します (onPullDownRefresh)

js で onPullDownRefresh 処理関数を定義します (および onLoad、ライフサイクル関数の兄弟など)、ページのユーザー プルダウン更新イベントをリッスンします。

[公式ドキュメント]これ以上の紹介はここではありません！今日の焦点は以下です

2. カスタマイズされたページの更新 (スクロールビュー)

コンポーネントで発生した問題

• #ドロップダウンをトリガーできません (トラブルシューティングの原因になります)
  1. スクロール ビュー コンポーネントはビューでラップされていません。この問題については言及されていません。このコンポーネントのみをラップする外部ビューがない場合、スクロールビュー コンポーネントでイベントをトリガーする方法はありません。
  2. スクロールビューの高さは固定ではありません。CSS で高さを設定してください。高さがエリアに表示されます。たとえば、高さを 50vh に設定した場合 (100vh は全画面)をクリックすると、コンポーネント内のコンテンツが表示されます。画面の半分で上下にスクロールするだけです。ページのスクロール バーはトリガーされません。

  scroll-view のスクロール バーのみがトリガーされます。高さを決定するのが難しい場合は、 scss(lang=' scss での計算計算') を使用できます (計算計算を使用する場合、前後にスペースが必要であることに注意してください) -)。

  3. 高値がパーセンテージとして設定されている場合、ドロップダウンはトリガーできません。高値には

  max-hight を使用できますが、min-hight は使用できません。 。

  4.scroll-y が設定されていません

• トップまでスクロールしてドロップダウンをトリガーしませんが、表示されているページでドロップダウンをトリガーします
  公式のデフォルト ページのスクロール バーがどこにあっても、スクロール ビュー ページで上下にスクロールしている限り、ドロップダウン機能がトリガーされ、ユーザー エクスペリエンスが非常に悪くなります。スクロール時にトリガーされる

  @scroll 関数を使用して、scroll-view スクロール バーの位置を取得し、refresher-enabled を制御して、カスタム プルダウンの更新のオンとオフを切り替えます。スクロール ビューのスクロール バーが一番上までスクロールするとき、enable refresher-enabled が true で、その他の条件が false です。
  

コードに直接アクセスして、以下を確認してください。 html:

<template>
<view>
  <scroll-view
    show-scrollbar="true"
    style="height: 300px"
    scroll-y="true"
    :refresher-enabled="isOpenRefresh"
    :refresher-triggered="triggered"
    :refresher-threshold="100"
    refresher-background="gray"
    @refresherpulling="onPulling"
    @refresherrefresh="onRefresh"
    @refresherrestore="onRestore"
    @refresherabort="onAbort"
    @scroll="onScroll"
  >
  <view v-if="!isOpenRefresh">别拉了，没有更多了~</view>
  <view class="item" v-for="(item, index) in dataList" :key="index">{{ item }}</view>
  </scroll-view>
</view>
</template>

基本的に、プルダウンの更新に使用される属性メソッドはこれらだけです。 js:

export default {
  data() {
    return {
      triggered: false,
      dataList: [],
      arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
      page: 0,
      isOpenRefresh: true // 是否开启下拉
    };
  },
  onLoad() {
    this._freshing = false;
    this.getData()
  },
  methods: {
    dealArray(array, groupNum) {
      let temp = [];
      for (let i = 0, len = array.length; i < len; i += groupNum) {
        temp.push(array.slice(i, i + groupNum));
      }
      return temp;
    },
    // 自定义下拉刷新控件被下拉
    onPulling(e) {
      console.log("onpulling", e);
      if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
      this.triggered = true;
    },
    // 自定义下拉刷新被触发
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.page++;
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
        this.getData();
      }, 500);
    },
    // 自定义下拉刷新被复位
    onRestore() {
      this.triggered = &#39;restore&#39;; // 需要重置
      console.error("onRestore");
    },
    // 自定义下拉刷新被中止
    onAbort() {
      console.error("onAbort");
    },
    getData() {
      // 前端模拟分页
      let temp = this.dealArray(this.arr, 3) 
      if (this.page > temp.length - 1) {
        this.isOpenRefresh = false
        return 
      }
      this.dataList.push(...temp[this.page])
    }
  },
};

style:

<style>
view {
  text-align: center;
}
.item:nth-child(odd) {
  background-color: antiquewhite;
}
.item:nth-child(even) {
  background-color: aquamarine;
}
</style>

[注] スクロールビューのプルダウンを更新すると、ページが上にスライドしてプルダウンがトリガーされます。 in

@refresherpulling="onPulling"このメソッドは次のとおりですif (e.detail.deltaY < 0) return // ページが上にスライドしてドロップダウンもトリガーされるのを防ぎます

デモ:

が表示されます。ページの任意の場所を下にスライドさせると、ドロップダウンがトリガーされます。 . このような問題が発生します。

@scrolltoupper="scrolltoupper"Topping 関数を使用すると、この関数を承認することで問題を解決できます。

// 触顶操作-准入
scrolltoupper() {
    this.isAllowRefresh = true
}

// 自定义下拉刷新控件被下拉

onPulling(e) {
    if (e.detail.deltaY < 0) return
    if (!this.isAllowRefresh) return;
    this.isRefresh = true;
    console.log("onpulling", e);
}

@scroll="onScroll" を使用して scroll-top の値を監視し、= にすることもできます。 ==0 、つまり頂上に到達したときにトリガーされます!もう一度トリガーしてください！しかし、彼がそれに遭遇したとき、彼はページをスライドしなければなりません、そしてスクロールバーが現れます、そして彼は耳を傾けます！ init 中に初期化して、変数が最初に 0 になるようにすることができます。

export default class Index extends mixins(uiMixin) {
	scrollTop: number = 0
	// 监听页面是否滚动 
	onScroll(e) {  
      this.scrollTop = e.detail.scrollTop
	}
	// 自定义下拉刷新被触发
  onRefresh() {
	if (this.scrollTop === 0) {
		if (this._freshing) return;
        this._freshing = true;
        this.page++;
       	setTimeout(() => {
          this.triggered = false;
          this._freshing = false;
          this.getData();
       }, 500);
	}
  }
})

推奨: 「

uniapp チュートリアル 」

以上がscrpll-view コンポーネントを使用して uniapp でプルダウン更新を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。