前言：

        一直说项目完了记录一下，还是给忘记了，想起来了，就记录下，我们的移动端经常会用到一种功能就是下拉加载更多，上拉刷新页面的功能，这里主要说的是mint-ui的下拉加载，上拉刷新

官网入口

实现原理：

获取数据是一个函数，这里通过给后台传当前页码和一页显示数据量（我们后台是按照分页那种写的）以及其他参数，然后获取数据，
下拉刷新直接调用重新渲染方法，
上拉加载会额外传个参数，让他拿到后跟后台传来的最大值进行对比，如果比对成功则消除掉下拉状态

实现步骤：

第一：template部分：

<mt-loadmore
 :top-method="loadTop"
 :bottom-method="loadBottom"
 :bottom-all-loaded="allLoaded"
 :autoFill='isAutoFill'
 ref="loadmore">
        //主体内容部分
        <NewCon class="recom_con" :list='newList'></NewCon>
</mt-loadmore>

第二：data部分

      /**
       * 上拉+下拉懒加载参数
       */
      allLoaded: false,//可以进行上拉,true不能，false可以
      isAutoFill: false,//是否自动触发上拉函数
      pageNum:1,

第三：methods部分

    /**
     * 获取列表数据
     */
    initTableData(isBottom){
      let articleTypeId = '1';//推荐的类型为1，后期不用改
      let pageNum = this.pageNum;//当前页码
      let pageSize = '5';//一次显示多少条数据
      let userId = this.$store.state.userData.id;//id
      this.$get('skms/app/article/getChannelArticle','',{
        articleTypeId:articleTypeId,
        pageNum:pageNum,
        pageSize:pageSize,
        userId:userId,
      }).then((res) => {
        let datas = res.data.data;
        if(res.data.code == 10000){
          if(isBottom){//isBottom==上拉加载，如果不传是下拉刷新
            if(this.pageNum>=datas.totalCount){//当前页码大于他发送的最大页码时/视具体情况添加限制条件
              this.$refs.loadmore.onBottomLoaded();
              this.allLoaded = true;
            }else{
              this.newList = this.newList.concat(datas.list);
              this.$refs.loadmore.onBottomLoaded();
            }
          }else{
            this.newList = datas.list;
            this.$refs.loadmore.onTopLoaded();
            this.allLoaded = false;//刷新完让可以上拉加载
            this.pageNum = 1;//当前页码
          }
        }
      }).catch((error)=>{
        console.log('错误信息：'+error)
      });
    },
//------------------------逻辑功能----------------------
    /**
     *  下拉刷新
     */
    loadTop() {
      console.log('下拉刷新');
      this.initTableData();
    },
    /**
     *  上拉加载
     */
    loadBottom() {
      console.log('上拉加载');
      this.pageNum++;
      let isBottom = true;
      this.initTableData(isBottom);
    },

实现效果

下拉刷新

上拉加载

1. 准备环境

Android Studio 2020.3.1

(1) 给项目安装 androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-beta01布局组件

(2) 在 dependencies依赖中添加一行

implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-beta01'

(3) 点击 Sync 同步，完成安装
笔者使用的是1.1.0 beta01版本，只要保证在这个版本之上应该都适用，更多关于这个布局的使用，请参考官方API Android开发文档，

2. 布局

2.1 foot_view

foot_view 用于显示上拉加载时，出现的画面提示，到时候会添加到列表框的底部

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <TextView
        android:id="@+id/foot_view_tv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="加载更多..."
         />
</LinearLayout>

ftoo_view.xml 布局的效果图：

2.2 activity_main

activity_main.xml 应用主要的布局 ，在 SwipeRefreshLayout布局里嵌套了一个 ListView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/refresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         />

    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</LinearLayout>

3.代码实现

3.1 全局变量

public class MainActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener, AbsListView.OnScrollListener{
    ArrayList<String> list_all;             // 存储列表所有的测试数据
    ArrayList<String> list_lv;              // 存储列表当前的数据
    ArrayAdapter<String> adapter;           // ListView的适配器对象
    SwipeRefreshLayout refreshLayout;       // 主界面刷新布局的对象
    ListView lv;                            // 主界面列表对象
    View foot;                              // 上拉加载底部的视图
    final int MAX_PAGE = 5;                 // 最多的页数
    final int PER_PAGE = 15;                // 每页的数据个数
    int page = 0;                           // 当前页数
}

3.2 OnCreate

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 1. 获取组件
        lv = findViewById(R.id.listview);
        refreshLayout = findViewById(R.id.refresh);

        // 2. 产生列表框测试的数据
        list_all = new ArrayList<>();
        for (int i = 0; i < PER_PAGE * MAX_PAGE; i++)
            list_all.add(String.format("Botton:%d", i));
        list_lv = new ArrayList<>(list_all.subList(0, PER_PAGE));

        // 3. 设置 适配器 以及 视图
        adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, list_lv);
        foot = LayoutInflater.from(this).inflate(R.layout.foot_view,null);
        lv.setAdapter(adapter);

        // 4. 设置监听事件
        lv.setOnScrollListener(this);               // 下拉刷新
        refreshLayout.setOnRefreshListener(this);   // 上拉加载
    }

3.3 自定义的showInfo方法

  public void showPageInfo(){
        Toast.makeText(MainActivity.this, String.format("当前是第%d页",page), Toast.LENGTH_SHORT).show();
    }

3.4 下拉刷新

    // SwipeRefreshLayout 下拉刷新
    @Override
    public void onRefresh() {
        page = ((page == MAX_PAGE - 1) ? 0 :  page + 1);
        list_lv.clear();
        list_lv.addAll(list_all.subList(page * PER_PAGE, (page+1) * PER_PAGE - 1));
        System.out.println(list_lv.toString());
        adapter.notifyDataSetChanged();
        showPageInfo();
        refreshLayout.setRefreshing(false);
    }

3.5 上拉加载

    // ListView 上拉加载
    @Override
    public void onScrollStateChanged(AbsListView absListView, int i) {
        int last =lv.getLastVisiblePosition();
        int first = lv.getFirstVisiblePosition();
        int num = lv.getCount();

        // SCROLL_STATE_IDLE 表示 当前View没有滚动

        if(last == num - 1 && SCROLL_STATE_IDLE == i)
            lv.addFooterView(foot);
        if(num == PER_PAGE + 1){
            lv.removeFooterView(foot);
            onRefresh();
            lv.setSelection(0);
        }
    }
    // ListView 上拉加载接口的另一个方法 没有用到 可以不管
    @Override
    public void onScroll(AbsListView absListView, int i, int i1, int i2) { }

4. 所有代码

package com.example.test1;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.AbsListView;
import android.widget.Adapter;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener, AbsListView.OnScrollListener{
    ArrayList<String> list_all;             // 存储列表所有的测试数据
    ArrayList<String> list_lv;              // 存储列表当前的数据
    ArrayAdapter<String> adapter;           // ListView的适配器对象
    SwipeRefreshLayout refreshLayout;       // 主界面刷新布局的对象
    ListView lv;                            // 主界面列表对象
    View foot;                              // 上拉加载底部的视图
    final int MAX_PAGE = 5;                 // 最多的页数
    final int PER_PAGE = 15;                // 每页的数据个数
    int page = 0;                           // 当前页数

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 1. 获取组件
        lv = findViewById(R.id.listview);
        refreshLayout = findViewById(R.id.refresh);

        // 2. 产生列表框测试的数据
        list_all = new ArrayList<>();
        for (int i = 0; i < PER_PAGE * MAX_PAGE; i++)
            list_all.add(String.format("Botton:%d", i));
        list_lv = new ArrayList<>(list_all.subList(0, PER_PAGE));

        // 3. 设置 适配器 以及 视图
        adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, list_lv);
        foot = LayoutInflater.from(this).inflate(R.layout.foot_view,null);
        lv.setAdapter(adapter);

        // 4. 设置监听事件
        lv.setOnScrollListener(this);               // 下拉刷新
        refreshLayout.setOnRefreshListener(this);   // 上拉加载
    }
    public void showPageInfo(){
        Toast.makeText(MainActivity.this, String.format("当前是第%d页",page), Toast.LENGTH_SHORT).show();
    }
    // SwipeRefreshLayout 下拉刷新
    @Override
    public void onRefresh() {
        page = ((page == MAX_PAGE - 1) ? 0 :  page + 1);
        list_lv.clear();
        list_lv.addAll(list_all.subList(page * PER_PAGE, (page+1) * PER_PAGE - 1));
        System.out.println(list_lv.toString());
        adapter.notifyDataSetChanged();
        showPageInfo();
        refreshLayout.setRefreshing(false);
    }

    // ListView 上拉加载
    @Override
    public void onScrollStateChanged(AbsListView absListView, int i) {
        int last =lv.getLastVisiblePosition();
        int first = lv.getFirstVisiblePosition();
        int num = lv.getCount();

        // SCROLL_STATE_IDLE 表示 当前View没有滚动

        if(last == num - 1 && SCROLL_STATE_IDLE == i)
            lv.addFooterView(foot);
        if(num == PER_PAGE + 1){
            lv.removeFooterView(foot);
            onRefresh();
            lv.setSelection(0);
        }
    }
    // ListView 上拉加载接口的另一个方法 没有用到 可以不管
    @Override
    public void onScroll(AbsListView absListView, int i, int i1, int i2) { }
}