最近搜索

小程序 列表 list 加载更多 列表 怎么写

浏览:5
管理员 2026-05-30 14:22




import {
  baseURL
} from '../../utils/config.js'
import {
  wx_login,
  request,
  uploadWXUserInfo,
  get_phone,
  isEmpty,
  uploadFile2
} from '../../utils/util.js'
import {
  find_openid_detail,
  xcx_user_update,
  xcx_user_find_id
} from '../../api/xcxUser.js'
import {
  record_list
} from '../../api/record'
import {
  project_list
} from '../../api/project'



const app = getApp();

Page({
  data: {
    baseURL: baseURL, //默认是域名
    openid: "", //用户的openid
    xcxUser: {},
    project_list: [],

    record_list: [],
    loading: false,
    noMore: false,
    hasSearched:false,
    page: 1,
    limit: 8,
  },
  async onLoad(options) {
    await this.load_project();
    await this.load_record();
  },
  async load_record() {
    this.setData({
      loading: true
    });
    var obj = {};
    obj.page = this.data.page;
    obj.limit = this.data.limit;
    record_list(obj).then(res => {
      const list = res.data.data || [];
      const total = res.data.count || 0;
      // 原来的列表 + 新列表 【追加模式】
      let old_list = this.data.record_list;
      let new_list = old_list.concat(list);
      this.setData({
        record_list: new_list,
        total:total,
        page: this.data.page + 1,
        noMore: list.length < this.data.limit,
        loading: false,
        hasSearched: true,
      })
    }).catch(err => {
      this.setData({
        loading: false
      });
      console.error('网络失败', err);
    });
  },
  async load_project() {
    var obj = {};
    obj.page =1;
    obj.limit = 100;
    project_list(obj).then(res => {
      this.setData({
        project_list:res.data.data
      })
    }).catch(err => {
      this.setData({
        loading: false
      });
      console.error('网络失败', err);
    });

  },
  // 下拉刷新
  onPullDownRefresh() {},
  // 上拉加载更多
  onReachBottom() {
    if (this.data.noMore || this.data.loading) return
    this.load_record();
  }
})



<view class="container">


  <!-- 消费记录列表 -->
  <view class="record-section">
    <view class="section-title">操作记录</view>
    <view class="record-list">
      <view class="record-card {{item.type === 1 ? 'record-card--add' : 'record-card--reduce'}}"
        wx:for="{{record_list}}" wx:key="id">
        <view class="record-left">
          <view class="record-user">{{item.xcx_user.true_name || '用户'}}</view>
          <view class="record-meta">
            <text class="record-project">{{item.project}}</text>
            <text class="record-time">{{item.create_time}}</text>
          </view>
          <view class="record-remark" wx:if="{{item.remark}}">{{item.remark}}</view>
          <view class="record-remark">操作人:{{item.xcx_user2.true_name}}</view>
        </view>
        <view class="record-right">
          <text class="record-num {{item.type === 1 ? 'num-add' : 'num-reduce'}}">
            {{item.type === 1 ? '+' : '-'}}{{item.num}}
          </text>
          <text class="record-remain">剩余 {{item.remain_num}}</text>
        </view>
      </view>
    </view>

    <view class="load-more" wx:if="{{loading}}">
      <text>加载中...</text>
    </view>
   
    <view class="load-more" wx:if="{{!loading && noMore &&  record_list.length  != 0}}">
      <text>没有更多了</text>
    </view>

    <!-- 空状态:有搜索词无结果 -->
    <view wx:if="{{hasSearched && record_list.length === 0 && !loading}}" class="load-more">
      <text class="empty-text">❌ 暂无记录</text>
    </view>

  </view>
</view>


联系站长

站长微信:xiaomao0055

站长QQ:14496453