小程序列表分页 下拉刷新 上拉加载更多

小程序列表分页 下拉刷新 上拉加载更多

假设请求参数request/url?offset=0&limit=10   从0开始，每页10条。offset由前端计算得来
假设后台返回参数：
	{
		code: 1
		data: {
			// row存放返回的数据列表，最多{ limit }条
			rows: [,…]
			// 一共多少条数据
			total: 120
		}
		msg: "获取成功"
		time: "1583892884"
	}

• js文件

var call = require("../../utils/wxrequest.js");
//获取应用实例
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imghost: 'https://imghost.example.com/'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //每页10条，当前第一条
    this.setData({
      limit: 10,
      now_page: 1,
      total_num: 0,
      //wxml页面要循环的列表
      visitorsIndex: []
    })
    this.RequestVisitors();
  },
  RequestVisitors: function ($now_page = 1) {
    var admin = wx.getStorageSync('admininfo');
    //call 方法是封装的wx请求方法，参数分别是：url、post参数、请求返回的结果集处理函数
    call.post(
      'visitors/index?offset=' + ($now_page - 1) * this.data.limit + '&limit=' + this.data.limit, 
      {},
      this.doVisitorIndex
    )
  },
  doVisitorIndex(res) {
    if (res.code == 1 && res.data.total > 0) {
      this.setData({
        visitorsIndex: this.data.visitorsIndex.concat(res.data.rows),
        total_num: res.data.total,
        now_page: this.data.now_page + 1
      })
    }
  },
  //下拉刷新
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading() //在标题栏中显示加载
    //重新onLoad
    this.onLoad();
    //模拟加载
    setTimeout(function () {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    });
  },
  //上拉加载更多
  onReachBottom: function () {
    var that = this;
    //计算共多少页
    var $max_page = Math.ceil(that.data.total_num / that.data.limit);
    var $now_page = that.data.now_page;
    // 显示加载图标
    wx.showLoading({
      title: '玩命加载中',
    })
    console.log($now_page,$max_page);
    if ($now_page <= $max_page) {
      that.RequestVisitors($now_page);
    } else {
      wx.showToast({
        title: '没有更多了',
        duration: 2000
      })
    }
    // 隐藏加载框
    wx.hideLoading();
  }
})

• 前端循环

<view class="forList bg-white"  wx:for="{{visitorsIndex}}" wx:key wx:for-index="index" wx:for-item="item">
    <view class="list  margin-top-sm" data-id="{{item.id}}" bindtap="goDetail" style="border-bottom:1px solid rgb(243,243,243);padding-bottom:10px;">
        <image wx:if="{{item.avatar_image}}" style="width:60px;height:60px;border-radius:60px;" src="{{imghost}}{{item.avatar_image}}"></image>
    </view>
</view

END