<template> <view> <view class="home-back" @click="backHome"> 返回首页 </view> <view class=""> <u-list> <u-list-item class="yuyue" v-for="item in yuyueList" :key="item.id"> <u-cell> <template #label> <view class="shoufei-lable"> <span class="lable-one">预约时间：{{fetchDate(item.createtime) }}</span> <!-- <span class="lable-two"></span> --> </view> <view class="shoufei-lable"> <span class="lable-one">预计到达时间：{{fetchDate(item.arriveTime)}}</span> <!-- <span class="lable-two"></span> --> </view> <view class="shoufei-lable"> <span class="lable-one">送货总量：{{item.sendAmonut}}</span> <!-- <span class="lable-two">6</span> --> </view> <view class="shoufei-lable"> <span class="lable-one">供应商：{{item.sName}}</span> <!-- <span class="lable-two">6</span> --> </view> <view class="shoufei-lable"> <span class="lable-one">车牌号：{{item.carNo}}</span> <!-- <span class="lable-two">6</span> --> </view> <view class="shoufei-lable"> <span class="lable-one">货源地：{{item.huoyuandiName}}</span> <!-- <span class="lable-two">6</span> --> </view> <view> <view class="lable-one">预约图片：</view> <image class="yuyeu-img" v-for="itemImg in item.pictureUrl.slice(0, -1).split(',')" :src=" 'http://' + itemImg" mode=""> </image> </view> </template> </u-cell> <u-cell> <template #value> <view class="yuyue-but"> <button class="but-one" type="default" @click="changeDel(item.id, item.weightStatus)">删除</button> <button class="but-two" type="default" @click="changeWeigh(item.id)">过磅二维码</button> </view> </template> </u-cell> </u-list-item> </u-list> </view> <view class="yuyue-popup"> <u-popup :show="yuyueshow" mode="center"> <!-- <canvas id="qrcode" canvas-id="qrcode" style="width: 500rpx;height: 500rpx;"></canvas> --> <view class="" style="width: 66vw; margin: 0 auto;"> <uqrcode ref="uqrcode" canvas-id="qrcode" :value="QRvalue" :options="{ margin: 10 }" :size="size"> </uqrcode> </view> <u-button class="close-Qr" @click="yuyueshow = false">关闭过磅二维码</u-button> </u-popup> </view> <!-- <u-loadmore :status="status" /> --> </view> </template> <script> import dayjs from 'dayjs' import api from '@/api/api.js'; export default { data() { return { yuyueshow: false, size: 240, QRvalue: "", pagenum: 1, //加载页 pageSize: '2', isFinished: false, status: 'loading', yuyueList: [], } }, onLoad(option) { this.fetchYuyueInfo() }, onReachBottom() { alert(111) if (this.isFinished) return // this.status = "nomore" this.pagenum = this.pagenum + 1 this.fetchYuyueInfo() }, methods: { fetchDate(times) { return dayjs(times).format('YYYY-MM-DD') }, async fetchYuyueInfo() { const data = await api.getYuyueInfo({ iDisplayStart: this.pagenum, iDisplayLength: this.pageSize }) console.log(data); if (this.pagenum === 1) { this.yuyueList = data.data // this.status = "nomore" console.log(this.pagenum); } else { this.yuyueList = [...this.yuyueList, ...data.data] } console.log(this.yuyueList.length) console.log(data.total) if (this.yuyueList.length >= data.total) { this.isFinished = true } console.log(this.pagenum, this.yuyueList); }, changeDel(delid, statu) { console.log("删除"); if (statu === 0) { uni.showModal({ title: '提示', content: '是否删除此条信息', success: async (res) => { if (res.confirm) { const data = await api.getYuyueInfoDel({ Id: delid }) uni.$u.toast(data.message) this.fetchYuyueInfo() } else if (res.cancel) { console.log('用户点击取消'); } } }); } else { uni.$u.toast("此条数据不可删除！") } }, changeWeigh(Id) { this.QRvalue = `${Id};` this.yuyueshow = true }, backHome() { uni.reLaunch({ url: '/pages/index/index' }); }, } } </script> <style lang="scss" scoped> .home-back { width: 230rpx; height: 60rpx; margin: 5rpx 40rpx; text-align: center; line-height: 60rpx; border-radius: 50px; font-weight: bold; color: #66cc1c; background: #fff; } .yuyue { width: 95vw; margin: 10rpx auto; border-radius: 8rpx; background: #fff; .shoufei-lable { display: flex; justify-content: space-evenly; align-items: center; margin: 10rpx 0; font-size: 32rpx; color: #82848a; .lable-one { flex: 1; } .lable-two { flex: 1; } } .yuyue-but { display: flex; justify-content: center; align-items: center; .but-one { width: 130rpx; height: 75rpx; line-height: 75rpx; font-size: 30rpx; color: #fff; margin-right: 20rpx; background: #f56c6c; } .but-two { width: 240rpx; height: 75rpx; line-height: 75rpx; font-size: 35rpx; color: #fff; background: #66cccc; } } .yuyue-popup { width: 550rpx; height: 550rpx; border-radius: 10rpx; } .yuyeu-img { width: 305rpx; height: 230rpx; margin: 10rpx auto; margin-right: 18rpx; } } :v-deep .uni-file-picker__container[data-v-bdfc07e0] { width: 240rpx; } .close-Qr { box-sizing: border-box; margin: 20rpx; width: 66vw; background: #66cccc; color: #fff; } </style> 以上代码onReachBottom() 只执行一次

<think>我们之前已经讨论过uni-app中onReachBottom只执行一次的问题，现在根据用户提供的站内引用，进一步整理解决方案。 用户引用的内容中提到了几个关键点： 1. pages.json中必须设置onReachBottomDistance（引用[1]和[2]） 2. 页面结构问题：使用绝对定位或固定定位可能导致无法触底（引用[4]） 3. 设置了overflow样式可能导致失效（引用[5]） 4. 使用scroll-view会屏蔽页面滚动事件（之前已提到，引用[4]中也有类似问题） 结合之前的回答和新的引用，我们重新梳理解决方案： 问题：uni-app onReachBottom 方法仅触发一次 可能原因及解决方案： 1. **pages.json未配置触发距离**（最常见） 在pages.json中为对应页面设置`onReachBottomDistance`，建议值100-150（引用[1][2]）。 ```json // pages.json { "pages": [ { "path": "pages/yourPage", "style": { "onReachBottomDistance": 150 // 设置触发距离 } } ] } ``` 2. **页面内容高度不足** 确保初始数据足够撑满一屏，否则不会触发滚动。可以在onLoad中初始化数据。 3. **页面结构问题** - 避免在页面最外层使用`position:absolute`或`position:fixed`（引用[4]）。 - 避免使用`overflow`样式（引用[5]），特别是外层容器设置`overflow:scroll`可能影响。 - 确保页面内容从顶部开始布局，没有额外的定位偏移。 4. **使用了scroll-view组件** scroll-view会屏蔽页面滚动事件，应移除scroll-view，使用普通view（引用[4]）。 5. **加载状态锁未重置** 在onReachBottom中，如果设置了loading状态，在数据加载完成后必须重置为false，否则后续触发会被拦截。 6. **跨端样式问题** 在App端，如果页面样式使用了scoped，可能需要单独为page元素设置样式（引用[5]）： ```html <style> /* 非scoped样式 */ page { height: 100vh; background-color: #F5F6FA; } </style> <style scoped> /* 组件样式 */ </style> ``` 7. **列表容器高度问题** 如果页面底部没有足够空间，可以添加一个空白view（引用[5]）： ```html <template> <view> <!-- 列表内容 --> <view v-for="(item,index) in list" :key="index">{{item}}</view> <!-- 底部空白，确保有滚动空间 --> <view style="height:300rpx;"></view> </view> </template> ``` 完整示例代码： ```javascript // 页面脚本 export default { data() { return { list: [], // 列表数据 loading: false, // 加载状态 page: 1, // 当前页码 } }, onLoad() { // 初始化数据，确保第一屏有足够数据 this.loadData() }, methods: { loadData() { // 模拟请求 uni.showLoading({ title: '加载中' }) setTimeout(() => { // 生成新数据 const newData = Array(10).fill().map((_, i) => `Item ${this.list.length + i + 1}`) this.list = [...this.list, ...newData] uni.hideLoading() this.loading = false // 重置加载状态 }, 1000) } }, onReachBottom() { // 防止重复请求 if (this.loading) return this.loading = true this.page++ this.loadData() } } ``` ```html <!-- 页面模板 --> <template> <view class="content"> <!-- 避免使用scroll-view --> <view v-for="(item, index) in list" :key="index" class="item">{{item}}</view> <!-- 底部空白区域 --> <view style="height: 300rpx;"></view> </view> </template> <style> /* 全局page样式 */ page { height: 100vh; background-color: #F5F6FA; } </style> <style scoped> .content { /* 避免使用绝对定位和overflow */ } .item { height: 120rpx; line-height: 120rpx; text-align: center; border-bottom: 1px solid #eee; } </style> ``` ```json // pages.json配置 { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "分页测试", "onReachBottomDistance": 150 } } ] } ``` 如果按照以上步骤仍然无法解决，请检查是否有其他因素影响滚动区域计算，例如自定义导航栏（navigationStyle:custom）可能需要调整页面顶部内边距。 相关问题： 1. uni-app中如何实现自定义导航栏下的滚动区域适配？ 2. uni-app长列表性能优化有哪些方案？ 3. uni-app中scroll-view和页面滚动如何选择？ 4. uni-app如何实现跨端样式兼容？</think>### Uni-App `onReachBottom` 方法仅触发一次解决方案 根据引用内容和实践经验，`onReachBottom` 只执行一次通常由以下原因导致，以下是完整解决方案： #### 核心问题排查与解决 1. **页面配置缺失**（关键！） 在 `pages.json` 中必须设置触发距离（引用[1][2]）： ```json { "path": "pages/yourPage", "style": { "onReachBottomDistance": 150, // 建议150px "enablePullDownRefresh": true } } ``` 2. **布局结构问题**（高频原因） - **绝对定位导致失效**（引用[4]）： 移除容器层的 `position: absolute/fixed` ```html <!-- 错误示例 --> <view class="container" style="position: absolute"> ... </view> <!-- 正确示例 --> <view class="container"> <!-- 内容 --> </view> ``` - **高度不足**（引用[5]）： 在页面底部添加空白区域： ```html <template> <view> <!-- 主要内容 --> <view style="height: 300rpx"></view> <!-- 确保滚动空间 --> </view> </template> ``` 3. **CSS 样式冲突**（引用[5]） - 避免在容器层使用 `overflow: scroll` - 正确设置页面高度： ```css /* 单独添加全局样式 */ <style> page { height: 100vh; background: #F5F6FA; } </style> <style scoped> /* 组件样式 */ </style> ``` 4. **数据加载逻辑错误** ```javascript export default { data() { return { list: [], loading: false, // 状态锁 page: 1, noMore: false } }, onReachBottom() { if (this.loading || this.noMore) return this.loading = true uni.showLoading({ title: '加载中' }) // 模拟请求 setTimeout(() => { const newData = Array(10).fill().map((_, i) => ({ id: this.list.length + i })) this.list = [...this.list, ...newData] this.page++ this.loading = false // 关键：重置状态锁 uni.hideLoading() // 模拟无更多数据 if (this.page > 3) this.noMore = true }, 1000) } } ``` 5. **错误使用 scroll-view**（引用[4]） ```html <!-- 错误：scroll-view 会屏蔽页面滚动 --> <scroll-view scroll-y> <view v-for="item in list">...</view> </scroll-view> <!-- 正确：使用普通容器 --> <view> <view v-for="item in list">...</view> </view> ``` #### 完整可运行示例 ```html <!-- 页面模板 --> <template> <view class="content"> <view v-for="item in list" :key="item.id" class="item"> {{ item.id }} - 列表项 </view> <!-- 底部提示 --> <view v-if="noMore" class="no-more">没有更多了</view> <view v-else class="loading-text">{{ loading ? '加载中...' : '上拉加载' }}</view> </view> </template> <script> export default { data() { return { list: Array(15).fill().map((_, i) => ({ id: i + 1 })), loading: false, noMore: false, page: 1 } }, onReachBottom() { if (this.loading || this.noMore) return this.loading = true console.log('触底触发') // 模拟API请求 setTimeout(() => { const newData = Array(5).fill().map((_, i) => ({ id: this.list.length + i + 1 })) this.list = [...this.list, ...newData] this.page++ this.loading = false // 模拟数据结束 if (this.page >= 4) this.noMore = true }, 1500) } } </script> <style> /* 关键：全局页面高度 */ page { height: 100vh; background-color: #f7f7f7; } .content { padding: 20rpx; } .item { height: 120rpx; line-height: 120rpx; border-bottom: 1rpx solid #eee; text-align: center; } .loading-text, .no-more { text-align: center; padding: 30rpx; color: #999; } </style> ``` ```json // pages.json 配置 { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "分页测试", "onReachBottomDistance": 150 } } ] } ``` #### 排查流程图 ```mermaid graph TD A[onReachBottom只触发一次] --> B{检查pages.json配置} B -->|未设置| C[添加onReachBottomDistance] B -->|已设置| D{检查页面布局} D -->|绝对定位| E[移除position:absolute] D -->|高度不足| F[添加底部空白view] D -->|使用scroll-view| G[改用普通view] A --> H{检查数据加载逻辑} H -->|loading未重置| I[确保重置loading:false] H -->|无更多数据| J[添加noMore状态判断] ``` > **关键提示**： > 1. 小程序端需确保页面内容高度 > 屏幕高度 + `onReachBottomDistance` > 2. H5端需检查浏览器滚动条是否生效（禁用`body{overflow:hidden}`） > 3. 使用自定义导航栏时，需手动设置页面顶部内边距[^4] --- ### 相关问题 1. uni-app 中如何优化长列表滚动性能？ 2. uni-app 的 `scroll-view` 和页面滚动应该如何选择？ 3. uni-app 如何实现跨端兼容的下拉刷新功能？ 4. uni-app 中自定义导航栏导致滚动区域计算错误怎么办？