uniappがプルアップイベントを監視できない問題の解決方法

uniapp では、ページ スクロール イベントをリッスンすることで、より多くのプルアップ読み込み関数を実装できます。しかし、ページが一番下にスライドしてもプルアップ イベントを監視できない場合があります。

最初に明確にしておきたいのは、uniapp は Vue フレームワークに基づいて開発されているため、この問題を解決するために Vue のアイデアから学ぶことができるということです。 Vue には v-infinite-scroll という命令が用意されており、これは一番下までスクロールするときにメソッドをトリガーすることができ、非常に便利です。ただし、uniapp はこの命令をサポートしていないため、手動で実装する必要があります。

実装の考え方は、ページをスクロールしたときに一番下にスライドしたかどうかを判定することです。一番下にスライドすると、プルアップ メソッドをトリガーしてさらに読み込みます。具体的な実装コードは次のとおりです。

<template>
  <view>
    <!-- 此处放置列表数据 -->

  </view>
</template>

<script>
export default {
  data() {
    return {
      // 列表数据
      listData: [],
      // 是否加载中
      isLoading: false,
      // 页面滚动距离
      scrollTop: 0,
      // 页面可见高度
      windowHeight: uni.getSystemInfoSync().windowHeight,
      // 页面总高度
      scrollHeight: 0,
      // 每页数据条数
      pageSize: 10,
      // 当前页数
      pageNum: 1,
      // 总页数
      totalPage: 0
    }
  },
  onLoad() {
    // 初始化数据
    this.getData()
  },
  methods: {
    // 获取数据
    getData() {
      // 加载中不允许重复请求
      if (this.isLoading) {
        return
      }

      // 加载中状态
      this.isLoading = true

      // 请求数据
      api.getData({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        // 数据加载完成后，将isLoading改为false，更新数据
        this.isLoading = false
        this.listData = this.listData.concat(res.list)
        this.totalPage = res.totalPage

        // 更新页面总高度，以便后面判断
        uni.createSelectorQuery().in(this).select('.list-container').boundingClientRect(data => {
          if (data) {
            this.scrollHeight = data.height
          }
        }).exec()
      })
    },
    // 上拉加载更多
    onScrollToLower() {
      // 判断当前页数是否小于总页数，否则禁止继续加载
      if (this.pageNum >= this.totalPage) {
        return
      }

      // 判断是否满足上拉加载更多的条件
      if (this.scrollTop + this.windowHeight >= this.scrollHeight) {
        // 加载下一页数据
        this.pageNum++
        this.getData()
      }
    },
    // 监听页面滚动事件，更新页面滚动距离
    onPageScroll(obj) {
      this.scrollTop = obj.scrollTop
    }
  }
}
</script>

このコードでは、最初にリスト データ listData と、ページごとのデータ項目数 pageSize や現在のページ番号 pageNum などのいくつかのページング関連変数を定義します。ページの読み込み時にデータを初期化し、最初のページのデータを取得します。

ページの一番下までスクロールすると、onScrollToLower メソッドがトリガーされます。このメソッドでは、まず現在のページ番号が合計ページ番号より小さいかどうかを判断します。それより大きいか等しい場合は、総ページ数の場合は、これ以上データが無いことを意味しますが、ロードできるのでそのままリターンしてください。それ以外の場合は、現在位置がページの下部に移動したかどうかを確認し、移動している場合は、プルアップ メソッドをトリガーしてさらに読み込むようにします。

主にページのスクロール距離scrollTopを更新するために、ページスクロールイベントをリッスンします。データを初期化した後、uni.createSelectorQuery().in(this).select('.list-container').boundingClientRect(data => {}) を使用してページの合計高さscrollHeightを取得し、ページまでスクロールします。下部で、scrollTop windowHeight がscrollHeight と等しいかどうかを確認して、ページの下部にスライドしたかどうかを判断します。

なお、この実装方法はリストのデータ量が多くない場合にのみ適用できるため、データ量が多すぎるとページがフリーズしたり、スライドが滑らかでなくなる可能性があります。この時点で、ページにデータをロードするか、サードパーティのコンポーネントを使用して、Mescroll などのプルアップ ロード機能を実装することを検討できます。

つまり、プルアップを実装してより多くの機能を搭載することは難しいことではなく、Vueの考え方を柔軟に活用し、uniappが提供するAPIを利用して実現することが鍵となります。

以上がuniappがプルアップイベントを監視できない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。