微信小程序触底不加载时什么问题

Question

    <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;
           });
       }
  }
};

我这个逻辑时多少有点问题的，请问怎么解决，触底根本没反应

Answer 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，因为在计算上会比较方便。