10bet原生js实现上拉加载

来源:http://www.chinese-glasses.com 作者:Web前端 人气:171 发布时间:2020-04-22
摘要:时间: 2019-09-22阅读: 247标签: 上拉加载 SwipeRefreshLayout 是Google官方提出的下拉刷新控件,官方功能只支持下拉刷新。SwipeRefreshLayout的上拉加载实现有两种方法,一种是实现滑动监听,当滑

时间: 2019-09-22阅读: 247标签: 上拉加载

SwipeRefreshLayout 是 Google官方提出的下拉刷新控件,官方功能只支持下拉刷新。SwipeRefreshLayout的上拉加载实现有两种方法,一种是实现滑动监听,当滑动到底部时实现加载更多功能;一种是通过事件传递机制监听上拉动作,然后实现加载更多功能。

原生js实现上拉加载其实超级简单,把原理整明白了你也会,再也不用去引一个mescroll啦~好了,废话不多说,开始进入正题:上拉加载是怎么去做的,原理就是监听滚动条滑到页面底部,然后就去做一次请求数据。那么只要我们对滚动监听即可。

1.第一种加载原理:

现在,让我们来看代码:

//继承自SwipeRefreshLayout,从而实现滑动到底部时上拉加载更多的功能.public class RefreshLayout extends SwipeRefreshLayout implements OnScrollListener {// listview实例private ListView mListView;// 上拉接口监听器, 到了最底部的上拉加载操作private OnLoadListener mOnLoadListener;// ListView的加载中footerprivate View mListViewFooter;// 是否在加载中 private boolean isLoading = false;public RefreshLayout(Context context) { this(context, null);}public RefreshLayout(Context context, AttributeSet attrs) { super(context, attrs); //一个圆形进度条 mListViewFooter = LayoutInflater.from.inflate( R.layout.listview_footer, null, false);}@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); // 初始化ListView对象 if (mListView == null) { getListView(); }}// 获取ListView对象private void getListView() { int childs = getChildCount(); if (childs > 0) { View childView = getChildAt; if (childView instanceof ListView) { mListView =  childView; // 设置滚动监听器给ListView mListView.setOnScrollListener; } }}// 设置加载状态,添加或者移除加载更多圆形进度条public void setLoading(boolean loading) { isLoading = loading; if (isLoading) { mListView.addFooterView(mListViewFooter); } else { mListView.removeFooterView(mListViewFooter); }}//设置监听器public void setOnLoadListener(OnLoadListener loadListener) { mOnLoadListener = loadListener;}@Overridepublic void onScrollStateChanged(AbsListView view, int scrollState) {}@Overridepublic void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { // 判断是否到了最底部,并且不是在加载数据的状态 if (mListView.getLastVisiblePosition() == mListView.getAdapter() .getCount() - 1 && isLoading == false) { // 首先设置加载状态 setLoading; // 调用加载数据的方法 mOnLoadListener.onLoad(); }}// 加载更多的接口public interface OnLoadListener { public void onLoad();}}
window.onscroll = function () { var scrollH = document.documentElement.scrollHeight;// 文档的完整高度 var scrollT = document.documentElement.scrollTop || document.body.scrollTop; // 当前滚动条的垂直偏移 var screenH = window.screen.height; // 屏幕可视高度 if ((scrollH - scrollT - screenH)  5) { //5只是一个相对值,可以让页面再接近底面的时候就开始请求 // 执行请求 }};

注释写的很清楚,实现滑动监听,然后初始化listview,写好加载任务接口与方法。在滑动监听方法里面,有几个参数注意一下:firstVisibleItem 表示在当前屏幕显示的第一个listItem在整个listView里面的位置visibleItemCount表示在现时屏幕可以见到的ListItem(部分显示的ListItem也算)总数totalItemCount表示ListView的ListItem总数listView.getLastVisiblePosition()表示在现时屏幕最后一个ListItem (最后ListItem要完全显示出来才算)在整个ListView的位置刚开始只判断是否滑动到了最底部,没有对加载状态进行判断,导致程序运行崩溃,在最底部加载数据时会一直加载。后来加上判断,默认不加载数据,isLoading==false,滑动到最底部加载数据时,设置为true,当加载完成以后,设置为false,加载完毕。

本文由10bet发布于Web前端,转载请注明出处:10bet原生js实现上拉加载

关键词:

最火资讯