小程序，分页处理

js

import Storage from "../../common/auth/Storage.js";
import { initInPage } from "../../common/requestData";

const app = getApp();
Page({
  changeType({
    currentTarget: {
      dataset: { type }
    }
  }) {
    this.setData({
      selectType: type
    });
    // initInPage(
    //   this,
    //   "getIntegralList",
    //   { openid: this.openid, type, page: 1 },
    //   { inDataName: "inData", outDataName: "dataList" }
    // );
    this.getList();
  },
  getList() {
    initInPage(
      this,
      "getIntegralList",
      { openid: this.openid, type: this.data.selectType, page: 1 },
      { inDataName: "inData", outDataName: "dataList" }
    );
  },

  data: {
    selectType: 0,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function({ type }) {
    this.setData({
      selectType: Number(type) || 0
    });
    this.openid = Storage.get().openid;
    // initInPage(
    //   this,
    //   "getIntegralList",
    //   { openid: this.openid, type: type || 0, page: 1 },
    //   { inDataName: "inData", outDataName: "dataList" }
    // );
    this.getList();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    return initInPage(this, "getIntegralList", this.inData, { inDataName: "inData", outDataName: "dataList" });
  },
});

三个事件，一个是初始化获取数据，一个是点击分类获取数据，一个是触碰底部获取下一页数据。

html

<view class="header">
    <view class="item header_left"  bind:tap="changeType" data-type="{{0}}">
        <view class="{{selectType == 0 ? 'active' : 'enactive'}}">全部</view>
    </view>
    <view class="item header_middle" bind:tap="changeType" data-type="{{1}}">
        <view class="{{selectType == 1 ? 'active' : 'enactive'}}">增加</view>
    </view>
    <view class="item header_right" bind:tap="changeType" data-type="{{2}}">
        <view class="{{selectType == 2 ? 'active' : 'enactive'}}">减少</view>
    </view>
</view>
<view class="integral_all detail_list">
    <block wx:for="{{dataList}}" wx:key="id">
        <view class="list_item">
            <view class="integral_pay">{{item.remark}}</view>
            <view class="remain_integral">剩余积分:{{item.left_integral}}</view>
            <view class="pay_data">{{item.create_time}}</view>
            <view class="pay_detail">{{item.type == 2 ? '-' : '+'}}{{item.integral}}</view>
        </view>
    </block>
</view>

下面是封装的内容！

import tips from "./tips";
import request from "./request";

/**
 * 获取数据 无分页
 * @param {any} that
 * @param {{ api: string, outDataName?: string, inData?: object}[]} initArray
 */
export const initNoPage = (that, initArray = [{ api: "", outDataName: "", inData: {} }]) => {
  wx.showNavigationBarLoading(); //在标题栏中显示加载
  const arrayMaxIndex = initArray.length - 1;
  initArray.forEach((item, index) => {
    const tempName = !item.outDataName ? `${item.api}Out` : item.outDataName;
    request(item.api, item.inData)
      .then(({ data }) => {
        that.setData({
          [tempName]: data
        });
        if (index === arrayMaxIndex) {
          return wx.hideNavigationBarLoading(); //在标题栏中关闭加载
        }
      })
      .catch(() => {
        return wx.hideNavigationBarLoading(); //在标题栏中关闭加载
      });
  });
};

/**
 * 获取数据 有分页
 * @param {string} that
 * @param {string} api API 链接
 * @param {{page?: number}} inData 输入数据
 * @param {{inDataName?: string, outDataName?: string}} dataName 输出数据名
 */
export const initInPage = (that, api = "", inData = { page: 1 }, dataName = { inDataName: "", outDataName: "" }) => {
  wx.showNavigationBarLoading(); //在标题栏中显示加载
  const inDataName = !dataName.inDataName ? `${api}In` : dataName.inDataName;
  const outDataName = !dataName.outDataName ? `${api}Out` : dataName.outDataName;
  request(api, inData)
    .then(({ data: { data_list } }) => {
      wx.hideNavigationBarLoading();
      let tempArray = [];
      if (!data_list || data_list.length === 0) {
        if (inData.page === 1) {
          that.setData({
            [outDataName]: tempArray
          });
          return tips.showMsg("无对应内容");
        }
        return tips.showMsg("已经到底啦");
      }
      tempArray = inData.page !== 1 ? [...that.data[outDataName], ...data_list] : [...data_list];
      inData.page++;
      that[inDataName] = inData;
      return that.setData({
        [outDataName]: tempArray
      });
    })
    .catch(() => {
      return wx.hideNavigationBarLoading();
    });
};