微信小程序-上拉加载更多（示例）

注：没有给出wxss，我这里用了colorUi第三方的组件（loading）   ------------ 转载请标注

一. 概念：

　scroll-view

　　可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)

　　具体参数：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

二.

1> wxml：

<scroll-view scroll-y bindscrolltoupper="scrollToUpper" bindscrolltolower="scrollToLower" scroll-with-animation="true" style="height: {{scrollViewHeight}}px;">
  <view class="cu-card case" wx:for="{{studentDatas}}" wx:key="id" id="a-{{item.id}}">
    <view class="cu-item shadow">
      <view class="image">
        <image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" mode="widthFix" lazy-load></image>
        <view class="cu-tag bg-blue">史诗</view>
        <view class="cu-bar bg-shadeBottom">
          <text class="text-cut">{{item.name}}</text>
        </view>
      </view>
    </view>
  </view>
  <!--  style="position:fixed; bottom:0;  750rpx; opacity:0.8;" -->
  <view hidden="{{!showLoading}}">
      <view class="cu-load bg-gray {{loadingState?'loading':'over'}}"></view>
  </view>
</scroll-view>

2> js：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    /* 加载状态：加载中（false）或加载完毕(true) */
    loadingState: true,
    /* 加载中或加载完毕 */
    showLoading: false,
    /* 第一页 */
    pageNo: 1,
    /* 每页数据条数 */
    pageSize: 10,
    /* 是否还有数据 */
    noMore: true,
    /* 数组 */
    studentDatas: [],
    /* 获取的高度 */
    scrollViewHeight: 0,
    /* 是否已被上拉 */
    isUpperPulled: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /* 取得页面高度 */
    wx.getSystemInfo({
        success: (res)=> {
            this.setData({
              scrollViewHeight: res.windowHeight
            });
        }
    });
    this.fetchDataList(this.data.pageNo,this.data.pageSize);
  },

  fetchDataList(pageNo,pageSize) {
    if(this.data.noMore){
      wx.request({
        url: 'https://zgxmcp.com/wxtestweb/wxtest/getDatas', //url
        method: 'GET', 
        header: { 'Content-Type': 'application/json'},
        data: {
          pageNo: pageNo,  
          pageSize: pageSize
        }, complete: (res)=> {
          /* 判断网络通讯状态 */
          if(res.statusCode == '200'){
            const students = res.data.students
            if(students.length>0){
              if(students.length<10){
                this.setData({
                  loadingState: false,
                  showLoading: false,
                  noMore: false,
                  isUpperPulled: false,
                  studentDatas: this.data.studentDatas.concat(res.data.students)
                })
              }else{
                this.setData({
                  showLoading: false,
                  noMore: true,
                  isUpperPulled: false,
                  studentDatas: this.data.studentDatas.concat(res.data.students)
                })
              }
            }
          }else{
            console.log(res.statusCode)
            wx.showToast({
              title: "statusCode："+res.statusCode,
              icon: 'none'
            })
          }
        }
      })
    }else{
      // 没有更多数据
      setTimeout( () => {
        this.setData({
          showLoading: true
        })
      }, 1500)
    }
  },

  scrollToLower: function(){
    if(!this.data.isUpperPulled){
      this.setData({
        isUpperPulled: true,
        showLoading: true,
        pageNo: this.data.pageNo +1
      })
      this.fetchDataList(this.data.pageNo,this.data.pageSize)
    }
  }
})

3> 顺便写个后台的数据接口

package com.ewx.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSONObject;
import com.ewx.servlet.userinfo.Student;

/**
 * 分页数据模拟
 * 
 * @author liuwl
 */
public class DataServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 设置字符集
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        
        // 获取输出
        PrintWriter out = resp.getWriter();

        JSONObject jsonObj = new JSONObject();

        int pageNo = Integer.valueOf(req.getParameter("pageNo"));
        
        List<Student> datas = makeData(pageNo);
        try {
            Thread.sleep(4000);
            jsonObj.put("pages", 3);
            jsonObj.put("pageNo", pageNo);
            jsonObj.put("students", datas);
        } catch (InterruptedException e) {}

        out.print(jsonObj);
    }

    static int num = 0;

    static List<Student> makeData(int pageNo) {

        int size = 0;

        if (1 == pageNo) {
            size = 10;
        } else if (2 == pageNo) {
            size = 10;
        } else if (3 == pageNo) {
            size = 10;
        } else if (4 == pageNo) {
            size = 5;
        } else {
            size = 0;
        }

        List<Student> students = new ArrayList<Student>();
        for (int i = 0; i < size; i++) {
            students.add(new Student(++num, "" + i, pageNo + "_姓名_" + i, i));
        }
        for (int i = 0; i < students.size(); i++) {
            System.out.println(students.get(i).toString());
        }
        return students;
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

效果如下：