Bagaimana untuk menyelesaikan masalah yang uniapp tidak dapat memantau acara tarik-up

Dalam uniapp, kami boleh melaksanakan lebih banyak fungsi pemuatan tarik naik dengan mendengar acara tatal halaman. Tetapi kadangkala anda mendapati bahawa walaupun halaman telah merosot ke bawah, acara tarik naik tidak dapat dipantau Bagaimana untuk menyelesaikannya?

Perkara pertama yang perlu dijelaskan ialah uniapp dibangunkan berdasarkan rangka kerja Vue, jadi kita boleh belajar daripada idea Vue untuk menyelesaikan masalah ini. Vue menyediakan arahan v-infinite-scroll, yang boleh mencetuskan kaedah apabila menatal ke bawah, yang sangat mudah. Walau bagaimanapun, uniapp tidak menyokong arahan ini, jadi kami perlu melaksanakannya secara manual.

Idea pelaksanaan adalah untuk menentukan sama ada ia telah merosot ke bawah semasa menatal halaman. Jika anda meluncur ke bawah, kemudian cetuskan kaedah tarik naik untuk memuatkan lebih banyak. Kod pelaksanaan khusus adalah seperti berikut:

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

Dalam kod ini, kami mula-mula menentukan senarai data listData dan beberapa pembolehubah berkaitan halaman, seperti bilangan item data setiap halamanSaiz halaman dan nombor halaman semasa halamanNombor. Apabila halaman dimuatkan, mulakan data dan dapatkan data halaman pertama.

Apabila menatal ke bahagian bawah halaman, kaedah onScrollToLower akan dicetuskan Dalam kaedah ini, kami mula-mula menentukan sama ada nombor halaman semasa adalah kurang daripada jumlah halaman Jika lebih besar daripada atau sama jumlah nombor halaman, ia bermakna tiada lagi data Ia boleh dimuatkan, jadi kembali terus. Jika tidak, tentukan sama ada kedudukan semasa telah merosot ke bahagian bawah halaman Jika ya, cetuskan kaedah tarik naik untuk memuatkan lagi.

Dengar acara tatal halaman, terutamanya untuk mengemas kini tatal jarak tatal halaman atas. Selepas memulakan data, kami akan menggunakan uni.createSelectorQuery().in(this).select('.list-container').boundingClientRect(data => {}) untuk mendapatkan jumlah ketinggian halaman scrollHeight dan tatal ke halaman Di bahagian bawah, tentukan sama ada scrollTop+windowHeight sama dengan scrollHeight untuk menentukan sama ada ia telah meluncur ke bahagian bawah halaman.

Perlu diambil perhatian bahawa kaedah pelaksanaan ini hanya terpakai apabila jumlah data senarai tidak besar. Jika jumlah data terlalu besar, ia boleh menyebabkan halaman menjadi beku dan gelongsor tidak lancar. Pada ketika ini, kami boleh mempertimbangkan untuk memuatkan data dalam halaman, atau menggunakan komponen pihak ketiga untuk melaksanakan lebih banyak fungsi pemuatan tarik naik, seperti Mescroll, dsb.

Ringkasnya, tidak sukar untuk melaksanakan tarik ke atas dan memuatkan lebih banyak fungsi yang penting ialah menggunakan idea Vue secara fleksibel dan menggunakan API yang disediakan oleh uniapp untuk mencapainya.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah yang uniapp tidak dapat memantau acara tarik-up. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!