Code Monkey home page Code Monkey logo

iscroll-refresh's Introduction

iscroll5 多选项卡+上拉刷新+下拉加载

效果

HTML

<div id="tabs">
	<div class="tab-scroller">
		<a class="active" href="#">选项卡1</a>
		<a href="#">选项卡2</a>
		<a href="#">选项卡3</a>
		<a href="#">选项卡4</a>
		<a href="#">选项卡5</a>
		<a href="#">选项卡6</a>
	</div>
</div>
<div id="tabs-bd">
	<div class="tabs-bd-scroller">
		<div class="wrapper" >
			<div class="scroller"> 
			<!--这里是内容区域--> <ul><li>...</li></ul>
			</div>
		</div>
		<div class="wrapper" ><div class="scroller"> <ul><li>...</li></ul></div>
	  <div class="wrapper" ><div class="scroller"> <ul><li>...</li></ul></div>
	  <div class="wrapper" ><div class="scroller"> <ul><li>...</li></ul></div>
	  <div class="wrapper" ><div class="scroller"> <ul><li>...</li></ul></div>
	</div>
</div>

###JS调用

  var ir = new iScrollRefresh('tabs','tabs-bd'); //第一个参数为选项卡容器ID 第二个为滚动容器  第三个参数可选参数(见下面可选配置)
	ir.upAction = pullUp; //上拉刷新的处理函数
	ir.downAction = pullDown; //下拉加载的处理函数

可选配置

var config = {
	//上拉刷新配置项
	pullDown:{ 
		height:60, //拉动多少像素后启动上拉刷新
		nextTime:3600, //当没有更新的数据后,间隔多少时间才能再次下拉刷新,单位:秒
		html:'<span class="ico"><i></i></span><span class="tip"><b>下拉刷新...</b><i></i></span>', //上拉刷新html
		except:[], //不使用上拉刷新的索引,如传入[0,1] 则第一个和第二个选项卡下面的滚动没有上拉刷新
		contentDown:'下拉刷新...',
		contentHover:'释放立即刷新...',
		contentRefresh:'正在刷新...',
		contentNomore:'没有更多新数据了...',
		callback:null, //上拉刷新处理函数 和 ir.upAction 一样
		animation:null, //动画处理函数 和 ir.upAnimation 一样
		tip:null //自定义提示函数,如果不设置这个函数则插件默认根据上面的提示语来改变提示
	},
	//下拉加载配置项
	pullUp:{
		height:40, //拉动多少像素后启动下拉加载
		html:'<span class="ico"></span><span class="tip">上拉加载更多</span>', //下拉加载提示 html
		except:[], //不使用下拉加载的索引,和上面一样
		contentUp:'上拉加载更多...',
		contentHover:'释放立即加载...',
		contentRefresh:'正在加载...',
		contentNomore:'没有更多数据了...',
		callback:null, //处理函数
		animation:null, //动画函数
		tip:null //自定义提示函数,如果不设置这个函数则插件默认根据上面的提示语来改变提示
	}
};

//使用自定义配置
var ir = new iScrollRefresh('tabs','tabs-bd',config);

处理函数说明

  • 下拉刷新和上拉加载的回调方法中都会传入一个参数过来
  • 使用pullDownCallBack方法来隐藏下拉刷新的提示
  • 使用pullUpCallBack方法隐藏上拉加载的提示
ir.upAction = pullUp; //定义下拉刷新回调函数
function pullUp(options){
	/*
	控件会把options参数传过来
	options.scroll  当前滚动的ISCROLL对象
	options.index   当前选项卡的索引,从0开始
	options.lastUpdate 上一次刷新的时间
	*/

	var index = options.index,lastUpdate = options.lastUpdate;
	var url = 'www.xxx.com/aticels'
	$.getJSON(url, {lastUpdate: lastUpdate}, function(json, textStatus) {
		if(json.code == 200){
			$('ul li').prepend(parseHtml(json.data));
			//关闭下拉刷新提示
			ir.pullDownCallBack(param); //如果不屏蔽下拉刷新,则第二个参数不要传
		}else{
			ir.pullDownCallBack(param,1); //如果屏蔽下拉刷新,则传第二个参数进去
		}
	});
}

ir.downAction = pullDown; //定义上拉加载的回调函数
function pullDown(options){
	/*
	控件会把options参数传过来
	options.scroll  当前滚动的ISCROLL对象
	options.index   当前选项卡的索引,从0开始
	options.lastUpdate 上一次刷新的时间
	options.page 当前已经加载的页数
	*/

	var index = options.index,lastUpdate = options.lastUpdate,page=options.page;
	var url = 'www.xxx.com/aticels'
	$.getJSON(url, {page: page,lastUpdate:lastUpdate}, function(json, textStatus) {
		if(json.code == 200){
			$('ul li').append(parseHtml(json.data));
			//关闭下拉刷新提示
			ir.pullUpCallBack(param); //如果还有更多数据,则第二个参数不要传
		}else{
			ir.pullUpCallBack(param,1); //如果没有更多数据的时候,传入第二个参数,屏蔽上拉加载
		}
	});
}

方法汇总

ir.upAction = function(){...} // 设置上拉刷新处理方法
ir.downAction = function(){...}  // 设置下拉加载的方法
ir.upAnimation  = function(options){...} //设置上拉刷新动画
ir.downAnimation =function(options){...} //设置下拉加载动画
/* options说明
scroll:当前iscroll控件对象
index:当前选项卡索引
downTip:上拉刷新的div/下拉加载的div
status:当前状态 0 下拉刷新/下拉加载  1 松开刷新/松开加载 2 刷新中/加载中 3 没有更多数据
*/

ir.upTip = function(options){...} //设置上拉刷新提示
ir.downTip = function(options){...} //设置下拉加载提示
/* options说明
var options = {
	scroll:当前iscroll空间对象
	index:当前页面索引
	ele:提示所在dom节点
	tip:提示语
};
*/
ir.slideAction = function(index){...} //设置滑动处理方法 index:当前页面索引
ir.config //配置

ir.refresh(index) //刷新index索引下的iscroll控件
ir.setPage(index,page) //设置index索引下加载的页数
ir.setNoMore(index) //设置index索引没有更多新数据 (下拉刷新没有新数据的情况)
ir.setLoadedAll(index) //设置index索引没有更多数据(上拉加载后全部数据都加载完成的情况)
ir.slide(function(index){...},true) //选项卡切换后回调函数 index为切换后的索引,第二参数如果传了则立即执行第一个function

ir.getDownTip(index) //返回指定索引的上拉提示dom节点
ir.getUpTip(index) //返回指定索引的下拉提示dom节点
ir.bdScroll //返回选项卡内容的iscroll控件对象
ir.bdScrolls //返回上下滚动的iscroll控件对象数组
ir.tabScroll //返回选项卡的iscroll控件

懒人方法

var ir = IR(array,length);
// array传入选项卡的名称数组 如:['选项卡1','选项卡2','选项卡3','选项卡4','选项卡5','选项卡6'];
// length 表示在可视屏幕内显示多少个选项卡,如设置为4,则选项卡5和6则需要滑动才能看到

iscroll-refresh's People

Contributors

mueat avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

iscroll-refresh's Issues

如果其中一个tab无内容,是不是下拉就不触发刷新

如果其中一个tab无内容,是不是下拉就不触发刷新?如果是这样的话,假如tab2无内容,正常情况下是无法下拉刷新的,在下拉刷新tab1的过程中,切换到tab2,tab2中下拉会触发刷新,请求一次接口内容,不知道是不是有这个问题?而且在触发过程中,多次来回切换,有的tab页面就无法滚动了

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.