m0_62833091 2024-07-13 19:39 采纳率: 66.7%
浏览 4
已结题

当点击查询时,没有数据却加载其他的数据?

问题:如图,通过条件查询后得到是数据,列表中可以正常显示,当查询的数据没有之后,会继续加载全部项的数据,并且查询得到的数据会重新加载一次。
想要的效果:当查询得到的数据加载完之后,应该不再加载数据。显示没有更多数据。如果没有查询操作,正常显示并加载全部项的数据。更多代码可查看代码片段。求大师指点
全部代码可打开代码片段:
https://developers.weixin.qq.com/s/AgQ0nEmj7SSR

img

WXML代码:
<view class="carpool-title">
  <text class="title-text">百姓同城拼车网-同城拼车</text>
</view>
<view class="ad-group">
  <image class="ad-image" src="../../images/专注.jpg" mode="" />
</view>
<form bindsubmit="formSubmit">
  <view class="search-input-group">
    <view class="input-group">
      <input class="search-input" placeholder="出发地" value="{{startPoint}}" bindinput="onStartPointEvent" />
      <image class="thumbnail" src="../../images/return.png" />
      <input class="search-input" placeholder="终点" value="{{goal}}" bindinput="onGoalEvent"  />
    </view>
    <button class="search-button" size="mini" formType="submit">查询</button>
  </view>
</form>
<segment-carpool items="{{items}}" countwe="{{result}}" binditemchengde="onItemChengdeEvent" defaultIndex="0" >
  <view slot="0" class="segment-page wehicle-page">
    <wehicle wx:for="{{wehicles}}" wx:key="wehicle" wx:for-item="wehicle" wehicle="{{wehicle}}"></wehicle>
  </view>
  <view slot="1" class="segment-page people-page">
    <wehicle wx:if="{{wehicle.carpool == '我要找车'}}" wx:for="{{wehicles}}" wx:key="wehicle" wx:for-item="wehicle" wehicle="{{wehicle}}"></wehicle>
  </view>
  <view slot="2" class="segment-page train-page">
    <wehicle wx:if="{{wehicle.carpool == '我要找人'}}" wx:for="{{wehicles}}" wx:key="wehicle" wx:for-item="wehicle" wehicle="{{wehicle}}"></wehicle>
  </view>
  <view slot="3" class="segment-page money-page">
    <wehicle wx:if="{{wehicle.carpool == '我找货车'}}" wx:for="{{wehicles}}" wx:key="wehicle" wx:for-item="wehicle" wehicle="{{wehicle}}"></wehicle>
  </view>
  <view slot="4" class="segment-page money-page" >
    <wehicle wx:if="{{wehicle.carpool == '我要找货'}}" wx:for="{{wehicles}}" wx:key="wehicle" wx:for-item="wehicle" wehicle="{{wehicle}}"></wehicle>
  </view>
</segment-carpool>
<loadingmore wx:if="{{wehicles.startPoint && wehicles.goal}}" hasmore="{{hasmore}}"></loadingmore>
<loadingmore else hasmore="{{hasmore}}"></loadingmore>

const db = wx.cloud.database();
const _ = db.command
Page({

  /**
   * 页面的初始数据
   */
  data: {
    items: ["全部""我要找车""我要找人""我找货车""我要找货"],
    hasmoretrue,
    wehicles: [],
    result0,
    startPoint:'',
    goal:'',
    isQuerying:false
  },

/**
   * 按条件查询数据
   */
  formSubmit(start){
    const that = this;
    that.setData({
      isQuerying:true
    })
    let promise = db.collection("wehicle").where({
        startPoint:that.data.startPoint,
        goal:that.data.goal,
      });
      if(start > 0){
        promise = promise.skip(start);
      }
      promise.limit(10).orderBy("create_itme","desc").get().then(res => {
        const wehicles = res.data;
        let hasmore = true;
        if(wehicles.length == 0 || !wehicles){
          hasmore = false
        }
        let newWehicles = [];
        if (start > 0) {
            newWehicles = that.data.wehicles.concat(wehicles);
        } else {
          newWehicles = wehicles;
        }
        // console.log(wehicles);
        newWehicles.forEach((wehicle, index) => {
          wehicle.create_time = wehicle.create_time.toString();
        })
        that.setData({
            wehicles: newWehicles,
            hasmore: hasmore,
            isQuerying:false
          })
      })
      
  },
/**
   * 获取数据库数据
   */
  lowdrelease(start = 0) {
    const that = this;
    let promise = db.collection("wehicle");
    if (start > 0) {
      promise = promise.skip(start);
    }
    promise.limit(10).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;
      }
      // console.log(wehicles);
      newWehicles.forEach((wehicle, index) => {
        wehicle.create_time = wehicle.create_time.toString();
      })
      
      that.setData({
        wehicles: newWehicles,
        hasmore: hasmore
      })
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.lowdrelease();
    // this.formSubmit()
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.lowdrelease(0);
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
   
    // this.formSubmit(this.data.wehicles.length)
    
    if(this.data.isQuerying){
      this.formSubmit(this.data.wehicles.length)
    }else{
      this.lowdrelease(this.data.wehicles.length);
    }
  },
})
  • 写回答

4条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-07-13 19:39
    关注

    引自免费微信小程序:皆我百晓生

    根据你提供的描述和代码片段,我理解你在微信小程序中遇到的问题是:当执行查询操作后,如果没有查询到数据,你的程序仍然会加载全部数据,并且会重新加载已经查询过的数据。你想要的效果是,当查询结果中没有数据时,不再加载其他数据,并显示“没有更多数据”的提示。

    为了达到这个效果,你可以在查询结果的回调函数中增加一个判断条件,检查查询结果的数据长度。如果数据长度为0,表示没有查询到数据,此时不再执行加载全部数据的操作,而是显示“没有更多数据”的提示。同时,你需要修改加载更多的逻辑,使其只在未执行查询操作或查询结果为空时才调用。下面是修改后的部分代码示例:

    formSubmit 函数中:

    formSubmit(event) {
      const that = this;
      that.setData({
        isQuerying: true
      });
      let promise = db.collection("wehicle").where({
        startPoint: that.data.startPoint,
        goal: that.data.goal
      });
      if (event.detail.swiped > 0) {
        promise = promise.skip(event.detail.swiped); // 根据滑动距离跳过已加载的数据
      }
      promise.limit(10).orderBy("create_itme", "desc").get().then(res => {
        constwehicles = res.docs; // 获取查询结果的数据数组
        let hasMore = true;
        if (wehicles.length === 0 || !wehicles) { // 判断查询结果是否为空
          hasMore = false; // 如果为空,则不再显示更多数据
        } else {
          // 处理查询结果数据,更新到页面中
          let newWehicles = [...that.data.wehicles]; // 保留原有数据
          newWehicles = newWehicles.concat(wehicles); // 添加新数据到数组末尾
          that.setData({
            wehicles: newWehicles, // 更新数据列表
            hasmore: hasMore // 更新是否有更多数据的标识
          });
        }
        that.setData({ isQuerying: false }); // 设置查询状态为未查询
      });
    }
    

    onReachBottom 函数中:

    修改加载更多的逻辑,只有在未执行查询操作或查询结果为空时才调用 lowdrelease 函数。

    在页面的初始化过程中,你可以调用一次 lowdrelease 函数来加载全部数据。当用户执行查询操作后,不再调用 lowdrelease 函数加载更多数据。这样可以确保只有在未执行查询操作或查询结果为空时才会加载全部数据。同时,在显示数据时,根据 hasmore 的值判断是否显示“没有更多数据”的提示。具体的实现方式可以根据你的页面布局和需求进行调整。希望这些修改能够帮助你解决问题!如果还有其他问题或需要进一步帮助,请随时向我询问。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 7月28日
  • 已采纳回答 7月20日
  • 创建了问题 7月13日

悬赏问题

  • ¥15 preLaunchTask"C/C++: aarch64- apple-darwin22-g++-14 生成活动 文件”已终止,退出代码为-1。
  • ¥18 关于#贝叶斯概率#的问题:这篇文章中利用em算法求出了对数似然值作为概率表参数,然后进行概率表计算,这个概率表是怎样计算的呀
  • ¥20 C#上传XML格式数据
  • ¥15 elementui上传结合oss接口断点续传,现在只差停止上传和继续上传,各大精英看下
  • ¥100 单片机hardfaulr
  • ¥20 手机截图相片分辨率降低一半
  • ¥50 求一段sql语句,遇到小难题了,可以50米解决
  • ¥15 速求,对多种商品的购买力优化问题(用遗传算法、枚举法、粒子群算法、模拟退火算法等方法求解)
  • ¥100 速求!商品购买力最优化问题(用遗传算法求解,给出python代码)
  • ¥15 虚拟机检测,可以是封装好的DLL,可付费