So lösen Sie das Problem, dass Uniapp Pull-up-Ereignisse nicht überwachen kann

In uniapp können wir weitere Pull-up-Ladefunktionen implementieren, indem wir Seiten-Scroll-Ereignisse abhören. Aber manchmal stellen Sie fest, dass das Pull-Up-Ereignis nicht überwacht werden kann, selbst wenn die Seite nach unten gerutscht ist.

Das erste, was klargestellt werden muss, ist, dass Uniapp auf der Grundlage des Vue-Frameworks entwickelt wurde, sodass wir aus den Ideen von Vue lernen können, um dieses Problem zu lösen. Vue bietet eine Anweisung v-infinite-scroll, die beim Scrollen nach unten eine Methode auslösen kann, was sehr praktisch ist. Uniapp unterstützt diese Anweisung jedoch nicht, daher müssen wir sie manuell implementieren.

Die Idee der Implementierung besteht darin, festzustellen, ob es beim Scrollen der Seite nach unten gerutscht ist. Wenn Sie nach unten gleiten, lösen Sie eine Pull-up-Methode aus, um mehr zu laden. Der spezifische Implementierungscode lautet wie folgt:

<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>

In diesem Code definieren wir zunächst die Listendaten listData und einige pagingbezogene Variablen, wie z. B. die Anzahl der Datenelemente pro Seite, pageSize und die aktuelle Seitenzahl Seitennummer. Wenn die Seite geladen wird, initialisieren Sie die Daten und rufen Sie die Daten der ersten Seite ab.

Beim Scrollen zum Ende der Seite wird die onScrollToLower-Methode ausgelöst. Bei dieser Methode ermitteln wir zunächst, ob die aktuelle Seitenzahl kleiner als die Gesamtseitenzahl ist gleich der Gesamtseitenzahl bedeutet, dass keine weiteren Aktualisierungen mehr möglich sind und daher direkt zurückgegeben werden. Andernfalls stellen Sie fest, ob die aktuelle Position an den unteren Rand der Seite gerutscht ist. Wenn ja, lösen Sie die Pull-up-Methode aus, um mehr zu laden.

Hören Sie auf Seiten-Scroll-Ereignisse, hauptsächlich um die Scroll-Distanz der Seite scrollTop zu aktualisieren. Nach der Initialisierung der Daten verwenden wir uni.createSelectorQuery().in(this).select('.list-container').boundingClientRect(data => {}), um die Gesamthöhe der Seite scrollHeight zu ermitteln und zu scrollen Bestimmen Sie unten auf der Seite, ob scrollTop+windowHeight gleich scrollHeight ist, um festzustellen, ob es an den unteren Rand der Seite gerutscht ist.

Es ist zu beachten, dass diese Implementierungsmethode nur für Situationen geeignet ist, in denen die Datenmenge in der Liste nicht groß ist. Wenn die Datenmenge zu groß ist, kann es zu einem Einfrieren der Seite und einem ungleichmäßigen Gleiten kommen. An diesem Punkt können wir das Laden der Daten in Seiten in Betracht ziehen oder Komponenten von Drittanbietern verwenden, um weitere Pull-up-Ladefunktionen wie Mescroll usw. zu implementieren.

Kurz gesagt, es ist nicht schwierig, Pull-up zu implementieren und weitere Funktionen zu laden. Der Schlüssel liegt darin, die Idee von Vue flexibel zu nutzen und die von Uniapp bereitgestellte API zu verwenden, um dies zu erreichen.

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass Uniapp Pull-up-Ereignisse nicht überwachen kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!