Ultra-Pull-To-Refresh上拉加载的使用

下拉加载

Ultra-Pull-To-Refresh

地址:https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh

随后就是增加上拉加载的版本

Ultra-Pull-To-Refresh-With-Load-More

地址:https://github.com/captainbupt/android-Ultra-Pull-To-Refresh-With-Load-More

其实资料以及比较完善了,我只是补充一下在使用上拉加载的时候可能遇到的问题,就是Ultra-Pull-To-Refresh-With-Load-More的使用

一.jar包的引用

1.可以使用gradle添加到项目中

compile 'in.srain.cube:ptr-load-more:1.0.2’

选择最新版本即可
2.在github上下载源码讲ptr-lib作为依赖添加到项目中,方便eclipse使用

二.使用方法几乎与Ultra-Pull-To-Refresh一样,首先配置到xml的布局文件中,使用RecyclerView做事例

<RelativeLayout           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="com.example.chen_pc.myapplication.MainActivity">

<in.srain.cube.views.ptr.PtrClassicFrameLayout
    android:id="@+id/rotate_header_list_view_frame"
    xmlns:cube_ptr="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    cube_ptr:ptr_duration_to_close="200"
    cube_ptr:ptr_duration_to_close_header="1000"
    cube_ptr:ptr_keep_header_when_refresh="true"
    cube_ptr:ptr_pull_to_fresh="false"
    cube_ptr:ptr_ratio_of_header_height_to_refresh="1.2"
    cube_ptr:ptr_resistance="1.7">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rotate_header_list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="@null"
        android:fadingEdge="none"
        android:listSelector="@android:color/transparent"
        android:paddingLeft="12dp"
        android:paddingRight="12dp"
        android:scrollbarStyle="outsideOverlay"
        android:choiceMode="singleChoice" />

</in.srain.cube.views.ptr.PtrClassicFrameLayout>

三.代码块

mPtrFrame.setPtrHandler(new PtrDefaultHandler2() {
        @Override
        public void onLoadMoreBegin(final PtrFrameLayout frame) {
            mPtrFrame.postDelayed(new Runnable() {
                @Override
                public void run() {

                    frame.refreshComplete();
                }
            }, 1000);
        }

        @Override
        public void onRefreshBegin(final PtrFrameLayout frame) {
            mPtrFrame.postDelayed(new Runnable() {
                @Override
                public void run() {

                    frame.refreshComplete();
                }
            }, 1000);
        }
    });

    // the following are default settings
    mPtrFrame.setResistance(1.7f);
    mPtrFrame.setRatioOfHeaderHeightToRefresh(1.2f);
    mPtrFrame.setDurationToClose(200);
    mPtrFrame.setDurationToCloseHeader(1000);
    // default is false
    mPtrFrame.setPullToRefresh(false);
    // default is true
    mPtrFrame.setKeepHeaderWhenRefresh(true);
    mPtrFrame.postDelayed(new Runnable() {
        @Override
        public void run() {

            mPtrFrame.autoRefresh();
        }
    }, 100);

四,这里主要说一下这个方法mPtrFrame.setPtrHandler()

参考源码可以看到里面是hanlder的回调,这个方法不仅作为数据加载处理的回调,同样,因为我们使用的是一个支持上拉加载的修改过的库,所以和原库的回调有区别
你的回调决定了你的模式,之前在这里浪费了很多时间,就是没有上拉的功能

上拉下拉均有的模式:

mPtrFrame.setPtrHandler(new PtrDefaultHandler2() {
        //重写方法忽略
}

只有下拉的模式:

mPtrFrame.setPtrHandler(new PtrDefaultHandler() {
        //重写方法忽略
}

其他的方法就不一一列举了,容易出问题的地方就是这里,你的回调决定了你的上拉与下拉的支持与否
具体的实现上拉的逻辑详细请看这里,
http://blog.csdn.net/hwz2311245/article/details/48749873#comments

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
你可以使用 Vant UI 库中的 `van-pull-refresh` 组件和 `van-list` 组件来实现下拉刷新上拉加载的功能。 首先,确保你已经安装了 Vant UI 并成功引入了相关组件。然后,按照以下步骤进行操作: 1. 在页面中引入 `van-pull-refresh` 和 `van-list` 组件: ```html <template> <van-pull-refresh @refresh="onRefresh"> <van-list v-model="listData" :finished="finished" @load="onLoad"> <!-- 列表内容 --> </van-list> </van-pull-refresh> </template> ``` 2. 在页面的 `data` 中定义相关数据和方法: ```javascript export default { data() { return { listData: [], // 列表数据 finished: false, // 是否加载完所有数据 }; }, methods: { onRefresh() { // 下拉刷新回调函数 // 在这里执行刷新操作,比如重新从服务器获取最新数据 // 更新列表数据,并将 finished 设置为 false,表示还有更多数据可以加载 }, onLoad() { // 上拉加载回调函数 // 在这里执行加载更多操作,比如从服务器获取下一页数据 // 更新列表数据,并将 finished 设置为 true,表示没有更多数据可以加载 }, }, }; ``` 3. 在 `onRefresh` 和 `onLoad` 方法中,根据实际业务逻辑执行刷新和加载更多的操作。你可以根据自己的需求,调用接口获取数据并更新 `listData` 数组的内容。 这样,你就可以通过下拉刷新上拉加载来实现列表数据的动态更新了。记得根据实际情况,在请求完成时设置 `finished` 的值,以便在页面中显示加载完成的状态。 希望对你有帮助!如有更多疑问,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值