How to solve the problem that uniapp cannot monitor pull-up events

In uniapp, we can implement more pull-up loading functions by listening to page scroll events. But sometimes you find that even if the page has slid to the bottom, the pull-up event cannot be monitored. How to solve this?

The first thing to make clear is that uniapp is developed based on the Vue framework, so we can learn from Vue's ideas to solve this problem. Vue provides an instruction v-infinite-scroll, which can trigger a method when scrolling to the bottom, which is very convenient. However, uniapp does not support this instruction, so we need to implement it manually.

The idea of ​​implementation is to determine whether it has slid to the bottom when scrolling the page. If you slide to the bottom, then trigger a pull-up method to load more. The specific implementation code is as follows:

<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 this code, we first define the list data listData and some paging-related variables, such as the number of data items per page pageSize and the current page number pageNum. When the page loads, initialize the data and obtain the data of the first page.

When scrolling to the bottom of the page, the onScrollToLower method will be triggered. In this method, we first determine whether the current page number is less than the total page number. If it is greater than or equal to the total page number, it means that there is no more data. It can be loaded, so return directly. Otherwise, determine whether the current position has slid to the bottom of the page. If so, trigger the pull-up method to load more.

Listen to page scrolling events, mainly to update the page scrolling distance scrollTop. After initializing the data, we will use uni.createSelectorQuery().in(this).select('.list-container').boundingClientRect(data => {}) to get the total page height scrollHeight, and scroll to the page At the bottom, determine whether scrollTop windowHeight is equal to scrollHeight to determine whether it has slid to the bottom of the page.

It should be noted that this implementation method is only applicable when the amount of list data is not large. If the amount of data is too large, it may cause page freezes and unsmooth sliding. At this point, we can consider loading the data in pages, or use third-party components to implement more pull-up loading functions, such as Mescroll, etc.

In short, it is not difficult to implement pull-up and load more functions. The key is to flexibly use the idea of ​​​​Vue and use the API provided by uniapp to achieve it.

The above is the detailed content of How to solve the problem that uniapp cannot monitor pull-up events. For more information, please follow other related articles on the PHP Chinese website!