Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pmg1989/iscroll-5-refresh
iscroll-5-refresh
https://github.com/pmg1989/iscroll-5-refresh
Last synced: about 22 hours ago
JSON representation
iscroll-5-refresh
- Host: GitHub
- URL: https://github.com/pmg1989/iscroll-5-refresh
- Owner: pmg1989
- License: mit
- Created: 2017-05-03T01:35:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-05-27T06:44:39.000Z (over 7 years ago)
- Last Synced: 2024-05-21T07:41:57.328Z (6 months ago)
- Language: JavaScript
- Size: 631 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# iscroll5 多选项卡+上拉刷新+下拉加载
## 效果
## HTML
```html
- ...
- ...
- ...
- ...
- ...
```
###JS调用
```javascript
var ir = new iScrollRefresh('tabs','tabs-bd'); //第一个参数为选项卡容器ID 第二个为滚动容器 第三个参数可选参数（见下面可选配置）
ir.upAction = pullUp; //上拉刷新的处理函数
ir.downAction = pullDown; //下拉加载的处理函数
```
### 可选配置
```javascript
var config = {
//上拉刷新配置项
pullDown:{
height:60, //拉动多少像素后启动上拉刷新
nextTime:3600, //当没有更新的数据后，间隔多少时间才能再次下拉刷新，单位：秒
html:'下拉刷新...', //上拉刷新html
except:[], //不使用上拉刷新的索引，如传入[0,1] 则第一个和第二个选项卡下面的滚动没有上拉刷新
contentDown:'下拉刷新...',
contentHover:'释放立即刷新...',
contentRefresh:'正在刷新...',
contentNomore:'没有更多新数据了...',
callback:null, //上拉刷新处理函数 和 ir.upAction 一样
animation:null, //动画处理函数 和 ir.upAnimation 一样
tip:null //自定义提示函数，如果不设置这个函数则插件默认根据上面的提示语来改变提示
},
//下拉加载配置项
pullUp:{
height:40, //拉动多少像素后启动下拉加载
html:'上拉加载更多', //下拉加载提示 html
except:[], //不使用下拉加载的索引，和上面一样
contentUp:'上拉加载更多...',
contentHover:'释放立即加载...',
contentRefresh:'正在加载...',
contentNomore:'没有更多数据了...',
callback:null, //处理函数
animation:null, //动画函数
tip:null //自定义提示函数，如果不设置这个函数则插件默认根据上面的提示语来改变提示
}
};
//使用自定义配置
var ir = new iScrollRefresh('tabs','tabs-bd',config);
```
### 处理函数说明
- 下拉刷新和上拉加载的回调方法中都会传入一个参数过来
- 使用pullDownCallBack方法来隐藏下拉刷新的提示
- 使用pullUpCallBack方法隐藏上拉加载的提示
```javascript
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); //如果没有更多数据的时候，传入第二个参数，屏蔽上拉加载
}
});
}
```
## 方法汇总
```javascript
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则需要滑动才能看到
```