uniapp vue3 onreachbottom如何使用

在uniapp中使用vue3时，onReachBottom事件不触发怎么办？我已经按照文档设置了onReachBottomDistance，页面也有足够的内容可以滚动，但就是无法触发下拉到底部的事件。请问正确的使用方法是什么？是不是在vue3的setup语法中需要特殊处理？

2 回复

在uniapp的vue3中，使用onReachBottom实现上拉加载更多：

  1. 页面配置：在页面.vue文件的script部分定义：
export default {
  onReachBottom() {
    // 触底时触发
    this.loadMore()
  },
  methods: {
    loadMore() {
      if (this.loading || this.noMore) return
      this.loading = true
      // 执行数据请求
      // 请求完成后设置 loading = false
      // 数据全部加载完设置 noMore = true
    }
  }
}
  1. 页面样式：确保页面高度可滚动：
page {
  height: 100%;
}
  1. 触发距离（可选）：在pages.json中配置：
{
  "path": "页面路径",
  "style": {
    "onReachBottomDistance": 50
  }
}

注意：

  • 页面必须有滚动条才会触发
  • 避免重复请求
  • 记得处理加载状态和没有更多数据的提示

在 UniApp 中使用 Vue 3 时，onReachBottom 用于监听页面滚动到底部的事件，常用于实现上拉加载更多功能。以下是使用方法：

1. 在页面配置中启用

在页面的 pages.json 或页面组件的 style 配置中，确保启用页面滚动：

{
  "path": "pages/your-page",
  "style": {
    "onReachBottomDistance": 50, // 触发距离（可选，默认50）
    "enablePullDownRefresh": false // 根据需求设置
  }
}

2. 在 Vue 3 组件中使用

在 <script setup> 或 methods 中定义 onReachBottom 方法：

<script setup>
import { ref } from 'vue'

const list = ref([])
const loading = ref(false)
const page = ref(1)

// 监听页面滚动到底部
const onReachBottom = async () => {
  if (loading.value) return // 防止重复加载
  
  loading.value = true
  console.log('触发上拉加载')
  
  try {
    // 模拟加载数据
    const newData = await fetchData(page.value)
    list.value.push(...newData)
    page.value++
  } catch (error) {
    console.error('加载失败:', error)
  } finally {
    loading.value = false
  }
}

// 模拟数据请求
const fetchData = (page) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([`数据${page}-1`, `数据${page}-2`])
    }, 1000)
  })
}
</script>

<template>
  <view>
    <view v-for="item in list" :key="item">{{ item }}</view>
    <view v-if="loading">加载中...</view>
  </view>
</template>

注意事项：

  • 页面必须可滚动：确保页面内容高度超过屏幕高度。
  • 防抖处理：通过 loading 状态避免重复触发。
  • 距离调整：通过 onReachBottomDistance 自定义触发距离。

这样即可实现滚动到底部时自动加载更多内容。

回到顶部