<view class="container" style="padding: 30rpx;">
<view style="margin:0rpx 20rpx;background-color: #f8f8f8;border-radius: 20rpx;padding:30rpx;" v-for="(item, index) in allInformation" :key="index">
<u-row>
<u-col span="6">
<view style="font-size: 36rpx; font-weight: bold;color: #626D71;">{{ item.roomNum }}view>
u-col>
<u-col span="6">
<u-row custom-style="justify-content:flex-end;font-size:28rpx">
<view class=" icon iconfont icon-kongxian">view>
<view>未使用view>
u-row>
u-col>
u-row>
<view style="border-left:4px #8DD883 solid;margin-top:20rpx;font-size: 28rpx;">
<view class="" style="padding: 4rpx;">账号：{{ item.user }}view>
<view style="padding: 4rpx;">密码：{{ item.password }}view>
view>
<view style="font-size: 24rpx;text-align: center;padding: 4rpx;">点击复制view>
view>
view>
<script>
export default {
data() {
return {
allInformation: [], // 账号密码所有信息
list: 20, // 每次加载20条
page: 0 // 页数
};
},
onLoad() {
this.getNetAccount();
},
onReachBottom() {
// 如果已经加载完所有数据，则不再加载
if (this.page >= Math.ceil(this.allInformation.length / this.list)) {
return 1;
}
// 加载下一页数据
this.getNetAccount();
console.log(this.page,this.list);
},
methods: {
getNetAccount() {
const db = wx.cloud.database();
const skip = this.page * this.list;
const limit = this.list;
db.collection('netaccount')
.skip(skip)
.limit(limit)
.get()
.then(res => {
const data = res.data;
this.allInformation.push(...data);
this.page = this.page + 1;
});
}
}
};
我这个逻辑时多少有点问题的，请问怎么解决，触底根本没反应
参考GPT和自己的思路：
根据你提供的代码，发现你的触底加载逻辑存在问题。首先在 data 中定义的 list 是每次加载的数量，在 onReachBottom 中应该是根据总数据量来计算当前页数，而不是根据 list 计算页数。
以下是修复逻辑的代码：
1. <view class="container" style="padding: 30rpx;">
2. <view style="margin:0rpx 20rpx;background-color: #f8f8f8;border-radius: 20rpx;padding:30rpx;" v-for="(item, index) in allInformation" :key="index">
3. <u-row>
4. <u-col span="6">
5. <view style="font-size: 36rpx; font-weight: bold;color: #626D71;">{{ item.roomNum }}</view>
6. </u-col>
7. <u-col span="6">
8. <u-row custom-style="justify-content:flex-end;font-size:28rpx">
9. <view class=" icon iconfont icon-kongxian"></view>
10. <view>未使用</view>
11. </u-row>
12. </u-col>
13. </u-row>
14.
15. <view style="border-left:4px #8DD883 solid;margin-top:20rpx;font-size: 28rpx;">
16. <view class="" style="padding: 4rpx;">账号：{{ item.user }}</view>
17. <view style="padding: 4rpx;">密码：{{ item.password }}</view>
18. </view>
19. <view style="font-size: 24rpx;text-align: center;padding: 4rpx;">点击复制</view>
20. </view>
21. </view>
22. <script>
23. export default {
24. data() {
25. return {
26. allInformation: [], // 账号密码所有信息
27. list: 20, // 每次加载20条
28. page: 1 // 页数
29. };
30. },
31. onLoad() {
32. this.getNetAccount();
33. },
34. onReachBottom() {
35. // 如果已经加载完所有数据，则不再加载
36. if ((this.page - 1) * this.list >= this.allInformation.length) {
37. return;
38. }
39. // 加载下一页数据
40. this.getNetAccount();
41. console.log(this.page, this.list);
42. },
43. methods: {
44. getNetAccount() {
45. const db = wx.cloud.database();
46. const skip = (this.page - 1) * this.list;
47. const limit = this.list;
48. db.collection("netaccount")
49. .skip(skip)
50. .limit(limit)
51. .get()
52. .then(res => {
53. const data = res.data;
54. this.allInformation.push(...data);
55. this.page = this.page + 1;
56. });
57. }
58. }
59. };
60.
修复逻辑主要在 onReachBottom 中的第三行，将原来的 if (this.page >= Math.ceil(this.allInformation.length / this.list)) 改成了 (this.page - 1) * this.list >= this.allInformation.length，意思是已加载的数据量超过总数据量时停止加载。
同时，在 data 中将 page 初始值改为 1，因为在计算上会比较方便。