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 중국어 웹사이트의 기타 관련 기사를 참조하세요!