-
2020-06-04 16:36:43
上拉刷新,下拉加载这个功能实际上在我们的应用当中使用范围是很广的,比如说商城中心在展示商品的时候就可以使用下拉加载这样的功能,那么如何实现呢?
首先遇到这个功能我就去搜插件市场了。经过我下载了不少的插件,我发现了一个非常不错的插件。
插件地址:
https://ext.dcloud.net.cn/plugin?id=343
官网地址:
http://www.mescroll.com/uni.html#load
这个官网里面的示例和讲解是非常清楚的,通过示例我们可以照着实现这个功能。刷新的示例代码:
在项目中使用:
// An highlighted block template部分: <!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 --> <mescroll-uni top="120" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick" @init="mescrollInit"> <!-- 数据列表 --> <pd-list :list="pdList"></pd-list> </mescroll-uni> script部分: import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"; import PdList from "@/components/other/pd-list.vue"; import mockData from "@/common/pdlist.js"; // 模拟数据 export default { components: { MescrollUni, PdList }, data() { return { mescroll: null, //mescroll实例对象 downOption:{ auto:false, // 不自动加载 }, upOption:{ auto:false, // 不自动加载 // page: { // num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始 // size: 10 // 每页数据的数量 // }, noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5 empty:{ tip: '~ 空空如也 ~', // 提示 btnText: '去看看' } }, pdList: [], //列表数据 isInit: false, // 列表是否已经初始化 scrollY: 0 } }, props:{ i: Number, // 每个tab页的专属下标 index: { // 当前tab的下标 type: Number, default(){ return 0 } } }, watch:{ // 监听下标的变化 index(val){ if (this.i === val && !this.isInit) { this.isInit = true; // 标记为true this.mescroll.triggerDownScroll(); } } }, mounted() { // 第一个tab,自动加载数据 if(this.i === 0){ this.isInit = true; // 标记为true this.mescroll.triggerDownScroll(); } }, methods: { // mescroll组件初始化的回调,可获取到mescroll对象 mescrollInit(mescroll) { this.mescroll = mescroll; }, /*下拉刷新的回调 */ downCallback(mescroll) { // 这里加载你想下拉刷新的数据, 比如刷新轮播数据 // loadSwiper(); // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 ) mescroll.resetUpScroll() }, /*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */ upCallback(mescroll) { //联网加载数据 this.getListDataFromNet(mescroll.num, mescroll.size, (curPageData)=>{ //联网成功的回调,隐藏下拉刷新和上拉加载的状态; console.log("i="+this.i+", mescroll.num=" + mescroll.num + ", mescroll.size=" + mescroll.size + ", curPageData.length=" + curPageData.length); mescroll.endSuccess(curPageData.length); //设置列表数据 if(mescroll.num == 1) this.pdList = []; //如果是第一页需手动制空列表 this.pdList=this.pdList.concat(curPageData); //追加新数据 }, () => { //联网失败的回调,隐藏下拉刷新的状态 mescroll.endErr(); }) }, //点击空布局按钮的回调 emptyClick(){ uni.showToast({ title:'点击了按钮,具体逻辑自行实现' }) }, /*联网加载列表数据 在您的实际项目中,请参考官方写法: http://www.mescroll.com/uni.html#tagUpCallback 请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用 实际项目以您服务器接口返回的数据为准,无需本地处理分页. * */ getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) { //延时一秒,模拟联网 setTimeout(()=> { try{ let listData = [] if (this.i === 0) { for (let i = (pageNum - 1) * pageSize; i < pageNum * pageSize; i++) { if (i === mockData.length) break listData.push(mockData[i]) } } else{ let wordArr = ['', '奶粉', '面膜', '图书'] let word = wordArr[this.i] for (let i = 0; i < mockData.length; i++) { if (mockData[i].pdName.indexOf(word) !== -1) { listData.push(mockData[i]) } } } // 回调 successCallback && successCallback(listData); } catch (e) { //联网失败的回调 errorCallback && errorCallback(); } },1000) } } }
注意:这个插件本身是基于scoll的,所以不能在这个插件当中使用scoll。但是呢,我在项目当中有时候必须使用scoll的时候,我就发现可以自己来设置上拉加载。
我们可以在需要上拉加载的位置上写上一行小字:上拉加载更多,然后呢对这行字设置点击事件:<view v-if="more" class="getmore" @tap="getmoreorder">加载更多...</view>
之后呢设置加载中的动画和当没有商品时进行提示“没有更多了”:
<!--加载loadding--> <tui-loadmore :visible="loadding" :index="3" type="red"></tui-loadmore> <tui-nomore :visible="nomore" bgcolor="#fafafa"></tui-nomore>
然后在js中写上点击加载更多之后的代码:
this.loadding = true; this.orderpage = this.orderpage + 1; let param = { //给后端传的数据 } ApiGetOrder(param).then(({ data }) => { if (data.status == 0) { this.loadding = false; this.oldorderList = [...data.msg]; if(this.oldorderList.length < this.pagenum){ this.nomore = true; this.more = false; }else{ this.more = true; } this.orderList = this.orderList.concat([...data.msg]); } })
今天的记录就到此结束啦,有问题的话可以进行指出,谢谢大家!
更多相关内容 -
使用vux实现上拉刷新功能遇到的坑
2020-08-28 01:27:03最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑,感兴趣的朋友参考下吧 -
SwipeRefreshLayout+RecyclerView实现上拉刷新和下拉刷新功能
2021-01-05 03:56:45SwipeRefreshLayout 是谷歌公司推出的用于下拉刷新的控件,SwipeRefreshLayout已经被放到了sdk中,在Version 19.1之后SwipeRefreshLayout 被放到support v4...今天说一下最常见的下拉刷新 和 上拉刷新的功能。 布局文 -
ios基于MJRefresh实现上拉刷新和下拉加载动画效果
2020-08-29 17:42:01本篇文章主要介绍了ios基于MJRefresh实现上拉刷新和下拉加载动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
Spring实现上拉刷新和下拉加载效果
2020-08-28 16:36:23主要为大家详细介绍了Spring实现上拉刷新和下拉加载效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
安卓下拉上拉刷新相关-XListview实现上拉刷新下拉加载功能.rar
2019-07-29 16:50:53XListview实现上拉刷新下拉加载功能.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。 -
基于Vue框架vux组件库实现上拉刷新功能
2020-08-28 17:34:39主要为大家详细介绍了基于Vue框架vux组件库实现上拉刷新功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
实现上下拉刷新内容效果
2021-04-01 15:57:18该源码实现上拉刷新/上拉加载效果,可用于实现显示。 -
XListview实现上拉刷新下拉加载功能.zip项目安卓应用源码下载
2022-03-09 04:24:49XListview实现上拉刷新下拉加载功能.zip项目安卓应用源码下载XListview实现上拉刷新下拉加载功能.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习研究参考 3.适合公司开发项目技术参考 -
Android应用源码之XListview实现上拉刷新下拉加载功能.zip项目安卓应用源码下载
2022-03-08 11:03:03Android应用源码之XListview实现上拉刷新下拉加载功能.zip项目安卓应用源码下载Android应用源码之XListview实现上拉刷新下拉加载功能.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习研究参考 3... -
js实现上下拉刷新.zip
2020-05-12 11:17:05基于bettrt-scroller实现上下拉刷新,支持页面过长第一次下滑到底部不刷新,可以强制刷新,实测有效 -
Android应用源码之XListview实现上拉刷新下拉加载功能.zip
2022-01-12 10:02:12Android应用源码之XListview实现上拉刷新下拉加载功能.zip -
安卓开发-XListview实现上拉刷新下拉加载功能.zip
2021-11-18 12:58:30安卓开发-XListview实现上拉刷新下拉加载功能.zip -
vue-cli3移动端实现上拉刷新+下拉加载
2019-11-12 18:51:44一直说项目完了记录一下,还是给忘记了,想起来了,就记录下,我们的移动端经常会用到一种功能就是下拉加载更多,上拉刷新页面的功能,这里主要说的是mint-ui的下拉加载,上拉刷新 官网入口 实现原理: 获取...前言:
一直说项目完了记录一下,还是给忘记了,想起来了,就记录下,我们的移动端经常会用到一种功能就是下拉加载更多,上拉刷新页面的功能,这里主要说的是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); },
-
Android | 同时实现上拉刷新和下拉加载 | 基于SwipeRefreshLayout 和 ListView
2021-11-21 20:37:54代码实现3.1 全局变量3.2 OnCreate3.3 自定义的showInfo方法3.4 下拉刷新3.5 上拉加载4. 所有代码 实现效果 下拉刷新 上拉加载 1. 准备环境 Android Studio 2020.3.1 (1) 给项目安装 androidx....文章目录
实现效果
下拉刷新
上拉加载
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) { } }
-
安卓Android源码——XListview实现上拉刷新下拉加载功能.zip
2021-10-13 23:23:38安卓Android源码——XListview实现上拉刷新下拉加载功能.zip -
安卓Android源码——XListview实现上拉刷新下拉加载功能.rar
2021-10-10 22:54:32安卓Android源码——XListview实现上拉刷新下拉加载功能.rar -
Android高级应用源码-XListview实现上拉刷新下拉加载功能.zip
2021-10-14 09:42:51Android高级应用源码-XListview实现上拉刷新下拉加载功能.zip