技术不行但人小帅 2023-03-19 17:21 采纳率: 59.7%
浏览 19
已结题

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


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

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

  • 写回答

1条回答 默认 最新

  • 追cium 2023-03-19 17:34
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 3月19日
  • 已采纳回答 3月19日
  • 创建了问题 3月19日

悬赏问题

  • ¥30 dbLinq最新版linq sqlite
  • ¥20 对D盘进行分盘之前没有将visual studio2022卸载掉,现在该如何下载回来
  • ¥15 完成虚拟机环境配置,还有安装kettle
  • ¥15 2024年全国大学生数据分析大赛A题:直播带货与电商产品的大数据分析 问题5. 请设计一份优惠券的投放策略,需要考虑优惠券的数量、优惠券的金额、投放时间段和投放商品种类等因素。求具体的python代码
  • ¥15 有人会搭建生鲜配送自营+平台的管理系统吗
  • ¥15 用matlab写代码
  • ¥30 motoradmin系统的多对多配置
  • ¥15 求组态王串口自定义通信配置方法或代码?
  • ¥15 实验 :UML2.0 结构建模
  • ¥20 用vivado写数字逻辑实验报告撰写,FPGA实验