アプレット - クラウド開発は、ドロップダウンロードが+分類されたデモを切り替えます

最初のステップ：データを取得するためのデータベースで始まります

 data: {
    
    getSystemInfo: {},
    score: 0, //积分状态 1升序 2降序
    price: 0, //价格状态 1升序 2降序
    firstType: "全部", //默认
    typeItem: [{
      name: '全部',
      id: 0
    }, {
      name: '寄拍区',
      id: 2
    }, {
      name: '换购区',
      id: 1
    }], //全部下的分类
    hidden: true, //控制全部下的分类显示隐藏
    pointsMallGoodsList: [], //积分列表,
    type_id: 0, //0 全部 1换购区 2 寄拍区
    page: 1,
    page_size: 20,
    page_scroll_top: 0,
    isLoadingGoodsList: false, //正在加载首页数据
    no_more_goods: false, //标记没有更多商品了

  }

 // 获取积分首页数据
  getIntegralGoodsDB: function(options) {
    var type_id = options.data.type_id; //寄拍区 换购区
    var score = options.data.score; //积分升降序
    var price = options.data.price; //价格升降序
    var that = this;
    var page = options.data.page;
    var page_size = parseInt(options.data.page_size);
    var skip_value = parseInt(page - 1) * parseInt(page_size);
    const db = wx.cloud.database();
    const $ = db.command.aggregate
    var whereObj = {}; //搜索条件
    if (type_id == 1 && score == 0 && price == 0) { //换购区
      console.log('换购区')
      whereObj = {
        type_id: type_id,
      }
      db.collection('integral_goods').skip(skip_value).limit(page_size).where(whereObj)
        .get({
          success: function(res) {
            // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
            var has_more = true;
            if (res.data.length == 0) {
              has_more = false;
            } else if (res.data.length > 0 && res.data.length < page_size) {
              has_more = false;
            }
            options.success && options.success({
              data: res.data,
              has_more: has_more
            })
          }
        })
    } else if (type_id == 2 && score == 0 && price == 0) { // 寄拍区
      console.log('寄拍区')
      whereObj = {
        type_id: type_id,
      }
      db.collection('integral_goods').skip(skip_value).limit(page_size).where(whereObj)
        .get({
          success: function(res) {
            // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
            var has_more = true;
            if (res.data.length == 0) {
              has_more = false;
            } else if (res.data.length > 0 && res.data.length < page_size) {
              has_more = false;
            }
            options.success && options.success({
              data: res.data,
              has_more: has_more
            })
          }
        })
    } else if (type_id == 0 && score == 0 && price == 0) { //全部
      console.log('全部')

      db.collection('integral_goods').skip(skip_value).limit(page_size)
        .get({
          success: function(res) {
            // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
            var has_more = true;
            if (res.data.length == 0) {
              has_more = false;
            } else if (res.data.length > 0 && res.data.length < page_size) {
              has_more = false;
            }
            options.success && options.success({
              data: res.data,
              has_more: has_more
            })
          }
        })
    } else if (type_id == 0 && score == 1 && price == 0) { //全部积分升序
      db.collection('integral_goods').skip(skip_value).limit(page_size).orderBy('exchange_integral', 'asc')
        .get({
          success: function(res) {
            // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
            var has_more = true;
            if (res.data.length == 0) {
              has_more = false;
            } else if (res.data.length > 0 && res.data.length < page_size) {
              has_more = false;
            }
            options.success && options.success({
              data: res.data,
              has_more: has_more
            })
          }
        })
      console.log('全部积分升序')
    } else if (type_id == 0 && score == 2 && price == 0) { //全部积分降序 
      console.log('全部积分降序')
      db.collection('integral_goods').skip(skip_value).limit(page_size).orderBy('exchange_integral', 'desc')
        .get({
          success: function(res) {
            // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
            var has_more = true;
            if (res.data.length == 0) {
              has_more = false;
            } else if (res.data.length > 0 && res.data.length < page_size) {
              has_more = false;
            }
            options.success && options.success({
              data: res.data,
              has_more: has_more
            })
          }
        })

    } else if (type_id == 2 && score == 1 && price == 0) { //寄拍区积分升序
      console.log('寄拍区积分升序')
      whereObj = {
        type_id: type_id,
      }
      db.collection('integral_goods').skip(skip_value).limit(page_size).where(whereObj).orderBy('exchange_integral', 'asc')
        .get({
          success: function(res) {
            // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
            var has_more = true;
            if (res.data.length == 0) {
              has_more = false;
            } else if (res.data.length > 0 && res.data.length < page_size) {
              has_more = false;
            }
            options.success && options.success({
              data: res.data,
              has_more: has_more
            })
          }
        })
    } else if (type_id == 2 && score == 2 && price == 0) { //寄拍区积分降序
      console.log('寄拍区积分降序')
      whereObj = {
        type_id: type_id,
      }
      db.collection('integral_goods').skip(skip_value).limit(page_size).where(whereObj).orderBy('exchange_integral', 'desc')
        .get({
          success: function(res) {
            // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
            var has_more = true;
            if (res.data.length == 0) {
              has_more = false;
            } else if (res.data.length > 0 && res.data.length < page_size) {
              has_more = false;
            }
            options.success && options.success({
              data: res.data,
              has_more: has_more
            })
          }
        })
    } else if (type_id == 1 && score == 1 && price == 0) { //换购区积分升序
      console.log('换购区积分升序')
      whereObj = {
        type_id: type_id,
      }
      db.collection('integral_goods').skip(skip_value).limit(page_size).where(whereObj).orderBy('exchange_integral', 'asc')
        .get({
          success: function(res) {
            // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
            var has_more = true;
            if (res.data.length == 0) {
              has_more = false;
            } else if (res.data.length > 0 && res.data.length < page_size) {
              has_more = false;
            }
            options.success && options.success({
              data: res.data,
              has_more: has_more
            })
          }
        })
    } else if (type_id == 1 && score == 2 && price == 0) { //换购区积分降序
      console.log('换购区积分降序')
      whereObj = {
        type_id: type_id,
      }
      db.collection('integral_goods').skip(skip_value).limit(page_size).where(whereObj).orderBy('exchange_integral', 'desc')
        .get({
          success: function(res) {
            // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
            var has_more = true;
            if (res.data.length == 0) {
              has_more = false;
            } else if (res.data.length > 0 && res.data.length < page_size) {
              has_more = false;
            }
            options.success && options.success({
              data: res.data,
              has_more: has_more
            })
          }
        })
    } else if (type_id == 0 && score == 0 && price == 1) { //全部价格升序
      db.collection('integral_goods').skip(skip_value).limit(page_size).orderBy('exchange_price', 'asc')
        .get({
          success: function(res) {
            // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
            var has_more = true;
            if (res.data.length == 0) {
              has_more = false;
            } else if (res.data.length > 0 && res.data.length < page_size) {
              has_more = false;
            }
            options.success && options.success({
              data: res.data,
              has_more: has_more
            })
          }
        })
      console.log('全部价格升序')
    } else if (type_id == 0 && score == 0 && price == 2) { //全部价格降序
      db.collection('integral_goods').skip(skip_value).limit(page_size).orderBy('exchange_price', 'desc')
        .get({
          success: function(res) {
            // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
            var has_more = true;
            if (res.data.length == 0) {
              has_more = false;
            } else if (res.data.length > 0 && res.data.length < page_size) {
              has_more = false;
            }
            options.success && options.success({
              data: res.data,
              has_more: has_more
            })
          }
        })
      console.log('全部价格降序')
    } else if (type_id == 1 && score == 0 && price == 1) { //换购区价格升序
      console.log('换购区价格升序')
      whereObj = {
        type_id: type_id,
      }
      db.collection('integral_goods').skip(skip_value).limit(page_size).where(whereObj).orderBy('exchange_price', 'asc')
        .get({
          success: function(res) {
            // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
            var has_more = true;
            if (res.data.length == 0) {
              has_more = false;
            } else if (res.data.length > 0 && res.data.length < page_size) {
              has_more = false;
            }
            options.success && options.success({
              data: res.data,
              has_more: has_more
            })
          }
        })
    } else if (type_id == 1 && score == 0 && price == 2) { //换购区价格降序
      console.log('换购区价格降序')
      whereObj = {
        type_id: type_id,
      }
      db.collection('integral_goods').skip(skip_value).limit(page_size).where(whereObj).orderBy('exchange_price', 'desc')
        .get({
          success: function(res) {
            // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
            var has_more = true;
            if (res.data.length == 0) {
              has_more = false;
            } else if (res.data.length > 0 && res.data.length < page_size) {
              has_more = false;
            }
            options.success && options.success({
              data: res.data,
              has_more: has_more
            })
          }
        })
    } else if (type_id == 2 && score == 0 && price == 2) { //寄拍区价格降序
      console.log('寄拍区价格降序')
      whereObj = {
        type_id: type_id,
      }
      db.collection('integral_goods').skip(skip_value).limit(page_size).where(whereObj).orderBy('exchange_price', 'desc')
        .get({
          success: function(res) {
            // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
            var has_more = true;
            if (res.data.length == 0) {
              has_more = false;
            } else if (res.data.length > 0 && res.data.length < page_size) {
              has_more = false;
            }
            options.success && options.success({
              data: res.data,
              has_more: has_more
            })
          }
        })
    } else if (type_id == 2 && score == 0 && price == 1) { //寄拍区价格升序
      console.log('寄拍区价格升序')
      whereObj = {
        type_id: type_id,
      }
      db.collection('integral_goods').skip(skip_value).limit(page_size).where(whereObj).orderBy('exchange_price', 'asc')
        .get({
          success: function(res) {
            // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
            var has_more = true;
            if (res.data.length == 0) {
              has_more = false;
            } else if (res.data.length > 0 && res.data.length < page_size) {
              has_more = false;
            }
            options.success && options.success({
              data: res.data,
              has_more: has_more
            })
          }
        })
    }

  },

データをチェックアウトする最初のステップの内部を初期化するために第二段階のスイッチを行うにはクリックして、

 // 切换全部分类
  bindType: function(e) {
    var that = this;
    var type = e.currentTarget.dataset.type;
    var type_id = e.currentTarget.dataset.id; //1换购 2寄拍
    this.setData({
      firstType: type,
      hidden: true,
      type_id: type_id,
      page: 1,//页码归1
      page_scroll_top: 0,//回到顶部
      no_more_goods: false,
    })
    store.data.pointsMallGoodsList = [];
    store.update();
    //更新积分商品列表
    that.loadPointsMall();
  },

第3のステップは、ページング負荷を行うことです

onShow: function() {
    var that = this;
    that.loadPointsMall()
  },
  loadPointsMall() {
    var that = this;
    that.setData({
      isLoadingGoodsList: true, //显示正在加载数据
    })
    wx.showLoading({
      title: '加载中',
    })
    that.getIntegralGoodsDB({
      data: {
        type_id: that.data.type_id,
        price: that.data.price,
        score: that.data.score,
        page: that.data.page,
        page_size: that.data.page_size
      },
      success: function(res) {
        console.log(res)
        console.log('1111')
        wx.hideLoading();
        store.data.pointsMallGoodsList = [...store.data.pointsMallGoodsList, ...res.data];
        store.update();
        that.setData({
          page: that.data.page + 1,
          isLoadingGoodsList: false, //显示正在加载数据
          no_more_goods: !res.has_more, //标记没有更多商品了
        })
      }
    })
  },
  //滚动加载
  loadMoreGoods: function() {
    console.log(this.data.isLoadingGoodsList);
    if (this.data.isLoadingGoodsList) return;
    if (this.data.no_more_goods) {
      wx.showToast({
        title: '没有更多了',
        icon: "none"
      })
      return;
    }
    this.loadPointsMall();
  },