一直显示正在加载中？

Question

当第一次或者刷新页面，也没执行上拉加载的时候，一直显示正在加载中，如图：正常情况下应该是当没有数据或者不足以到上拉加载的时候，应该显示没有更多数据，有上拉加载的动作时才显示正在加载中

components组件代码
wxml代码：

<button class="loading-btn" loading="{{hasmore}}" style="height:{{height}}px;">
  <block wx:if="{{hasmore}}">
    <text class="loadingtext">{{loadingtext}}</text>
  </block>
  <block wx:else>
    <text class="loadingtext">{{loadedtext}}</text>
  </block>
</button>

js代码：

 properties: {
       loadingtext:{
           type:String,
           value:"正在加载中..."
       },
       loadedtext:{
           type:String,
           value:"没有更多数据"
       },
       hasmore:{
           type:Boolean,
           value:true
       },
       height:{
           type:Number,
           value:40
       },
    },

pages页面index代码：
wxml代码：

 <loadingmore hasmore="{{hasmore}}"></loadingmore>

js代码：

const db = wx.cloud.database();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    items: ["全部", "我要找车", "我要找人", "我找货车", "我要找货"],
    hasmore: true,
    wehicles: [],
    result: 0,
    startPoint:'',
    goal: '',
    isQuerying: false,
    list:[],
    listones:[],
    listtwos:[],
    listthrees:[],
    listfours:[],
  },

/**
   * 获取数据库数据
   */
  lowdrelease(start = 0) {
    const that = this;
    let list = db.collection("wehicle");
      if (start > 0) {
        list = list.skip(start);
      }
      list.limit(5).orderBy("create_time", "desc").get().then(res => {
          console.log(res);
        const wehicles = res.data;
        let hasmore = true
        if (wehicles.length == 0) {
          hasmore = false
        }
        let newWehicles = [];
        if (start > 0) {
          newWehicles = that.data.wehicles.concat(wehicles);
        } else {
          newWehicles = wehicles;
        }
        newWehicles.forEach((wehicle, index) => {
          wehicle.create_time = wehicle.create_time.toString();
        })
        that.setData({
          wehicles: newWehicles,
          hasmore: hasmore,
        })
      });
  
        list.count().then(res => {
          console.log(res)
          that.setData({
            result:res.total
          })
        })
      
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.lowdrelease(0);
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.lowdrelease(0);
    this.setData({
      isQuerying:false
    }) 
    wx.stopPullDownRefresh();
  },
 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
      if(!this.data.isQuerying) {
        this.lowdrelease(this.data.wehicles.length);   
      }else{
        this.data.isQuerying
      }    
  },

Answer 1

以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

---

根据您提供的代码和问题描述，看起来您需要解决的是微信小程序页面加载和数据展示的问题。以下是一些可能的解决方案和建议：

1. 确保hasmore变量正确初始化： 在页面的data对象中，hasmore应该根据数据库查询结果来初始化。如果查询结果为空，应该将hasmore设置为false。

2. 修改lowdrelease函数： 当数据库查询没有返回数据时，应该将hasmore设置为false。这可以通过检查wehicles.length来实现。如果长度为0，说明没有更多数据，应设置hasmore为false。

   list.get().then(res => {
       const wehicles = res.data;
       let hasmore = wehicles.length > 0; // 如果查询结果不为空，hasmore为true
       // ...其他代码
       that.setData({
           wehicles: newWehicles,
           hasmore: hasmore,
       });
   });
   

3. 检查组件的loading属性绑定： 确保loading属性正确绑定到hasmore变量，并且根据hasmore的值来显示不同的文本。

4. 处理onReachBottom事件： 当用户上拉触底时，如果isQuerying为true，应该等待直到isQuerying变为false再进行数据加载。

   onReachBottom() {
       if (!this.data.isQuerying) {
           this.lowdrelease(this.data.wehicles.length);
       } else {
           // 可以设置一个定时器或者等待某个条件，然后再次检查
           setTimeout(() => {
               this.onReachBottom();
           }, 1000);
       }
   }
   

5. 同步数据加载逻辑与用户界面更新： 确保在数据加载完成后，使用setData方法更新页面上的wehicles数组和hasmore变量。

6. 处理页面首次加载的情况： 在onShow生命周期函数中调用lowdrelease(0)确保页面显示时数据是最新的。

7. 重置页面状态： 在onPullDownRefresh函数中，除了调用lowdrelease(0)外，还应该重置isQuerying状态。

8. 检查组件的height属性： 确保组件的height属性正确设置，并且符合设计要求。

请根据这些建议逐一检查并修改您的代码，以解决页面加载和数据展示的问题。如果问题仍然存在，可能需要进一步调试或查看是否有其他逻辑错误。