onReachBottom上拉进入下个页面

用户可以通过在小程序页面中向上滑动手指，进入下一个页面。这个页面可以是通过导航栏或其他页面元素链接到的，也可以是通过滚动到页面底部自动加载的。在小程序中，通常使用scroll-view组件来实现滚动加载功能。当用户滑动到页面底部时，可以触发一个事件，例如onReachBottom，然后在这个事件中加载下一个页面的数据或跳转到下一个页面。

### 不依赖 `onPullDownRefresh` 和 `onReachBottom` 的上拉加载、下拉刷新和分页功能实现 在 UniApp 中，虽然 `onPullDownRefresh` 和 `onReachBottom` 是常用的内置事件用于实现下拉刷新和上拉加载功能，但如果不想使用这些方法，也可以通过监听滚动位置或其他方式手动触发相应的逻辑。以下是具体的实现方案。 --- #### 1. 下拉刷新替代方案 可以通过监听页面的触摸事件（如 `touchstart` 和 `touchend`）或者绑定自定义手势来模拟下拉刷新的效果。以下是一个基于触摸事件的手动下拉刷新示例： ```html <template> <scroll-view class="container" scroll-y @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"> <view v-for="(item, index) in listData" :key="index">{{ item.name }}</view> <view v-if="isRefreshing">正在刷新...</view> </scroll-view> </template> <script setup> import { ref } from 'vue'; const startY = ref(0); // 记录起始触摸点 const moveY = ref(0); // 记录移动中的触摸点 const isRefreshing = ref(false); // 刷新状态 const listData = ref([{ name: '初始数据项' }]); // 模拟获取数据的方法 function fetchData() { return new Promise((resolve) => { setTimeout(() => { resolve([{ name: '新数据项1' }, { name: '新数据项2' }]); }, 1000); }); } // 触摸开始时记录起点坐标 function handleTouchStart(event) { startY.value = event.touches[0].pageY; } // 触摸移动时计算偏移量 function handleTouchMove(event) { if (!isRefreshing.value && event.touches[0].pageY > startY.value + 50) { isRefreshing.value = true; // 达到一定距离后进入刷新状态 } } // 触摸结束时判断是否需要刷新 async function handleTouchEnd() { if (isRefreshing.value) { const newData = await fetchData(); listData.value = newData.concat(listData.value); // 将新数据拼接到前面 isRefreshing.value = false; // 结束刷新状态 } } </script> <style scoped> .container { height: 100vh; } </style> ``` --- #### 2. 上拉加载更多替代方案 可以通过监听 `scroll-view` 的滚动位置来检测何时接近页面底部并触发加载更多逻辑。具体实现如下： ```html <template> <scroll-view class="container" scroll-y @scroll="handleScroll" :style="{ height: windowHeight + 'px' }"> <view v-for="(item, index) in listData" :key="index">{{ item.name }}</view> <view v-if="isLoadingMore">正在加载更多...</view> </scroll-view> </template> <script setup> import { ref, onMounted } from 'vue'; import { getWindowHeight } from './utils'; // 自定义工具函数获取窗口高度 const listData = ref([]); const isLoadingMore = ref(false); // 加载更多状态 const hasMore = ref(true); // 是否有更多数据 const page = ref(1); // 当前页码 const pageSize = ref(10); // 每页大小 const scrollTop = ref(0); // 滚动条顶部位置 const scrollHeight = ref(0); // 可滚动区域总高度 const windowHeight = ref(getWindowHeight()); // 窗口可见区域高度 // 模拟获取数据的方法 function fetchMoreData(currentPage) { return new Promise((resolve) => { setTimeout(() => { const data = Array.from({ length: pageSize.value }).map((_, i) => ({ id: currentPage * pageSize.value + i, name: `Item ${currentPage * pageSize.value + i}`, })); resolve(data.length === 0 ? [] : data); }, 1000); }); } // 处理滚动事件 async function handleScroll(e) { scrollTop.value = e.detail.scrollTop; scrollHeight.value = e.detail.scrollHeight; if ( !isLoadingMore.value && hasMore.value && scrollTop.value + windowHeight.value >= scrollHeight.value - 50 ) { isLoadingMore.value = true; page.value += 1; const newData = await fetchMoreData(page.value); if (newData.length === 0) { hasMore.value = false; // 没有更多的数据了 } else { listData.value.push(...newData); // 追加新数据 } isLoadingMore.value = false; } } onMounted(async () => { const initialData = await fetchMoreData(page.value); listData.value = initialData; }); </script> <style scoped> .container { overflow-y: auto; } </style> ``` --- #### 3. 分页加载核心逻辑 无论采用何种方式触发加载更多操作，分页的核心逻辑都是一致的： - 维护当前页码 (`page`) 和每页大小 (`pageSize`)。 - 在每次请求完成后更新数据列表，并检查是否有更多数据可加载[^1]。 --- ### 总结 以上两种方式分别实现了不依赖 `onPullDownRefresh` 和 `onReachBottom` 的下拉刷新与上拉加载功能。通过监听触摸事件或滚动事件，可以灵活地控制刷新和加载的行为。 --- ###