Skip to content

Commit

Permalink
0.8.0 新年快乐
Browse files Browse the repository at this point in the history
  • Loading branch information
@ximan
ximan committed Feb 2, 2016
1 parent 33d0b01 commit 0bf26a0
Show file tree
Hide file tree
Showing 11 changed files with 302 additions and 71 deletions.
6 changes: 6 additions & 0 deletions Changelog.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
### 0.8.0(160202)

* 优化默认判断内容过少自动加载下方内容，如果加载一次不满一屏，继续加载，超过一屏为止
* 增加参数autoLoad
* 增加`dropReload（）` API，方便手动调用加载底部方法

### 0.7.0(151225)

* 增加默认判断内容过少自动加载下方内容
Expand Down
4 changes: 4 additions & 0 deletions Intro.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
### 0.8.0(160202)

上次加了默认内容过少自动触发加载下方内容。结果又被吐槽，只有加个参数autoLoad，要么自动触发加载内容，不够一屏继续加载，要么不触发。另外，增加`dropReload（）` API，可以方便类似微博APP点首页就加载页面效果。目前是默认加载下方内容。另外tab功能还没想出来怎么做，容我再想想～～～

### 0.7.0(151225)

根据网友提议，默认内容过少时，自动触发加载下方内容，只会加载一次，如果内容还不够一屏，无法继续触发。并且修复`lock()`，增加参数可以手动锁定上方或者下方。
Expand Down
28 changes: 21 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,17 @@

## 背景介绍

根据网友提议，默认内容过少时，自动触发加载下方内容，只会加载一次，如果内容还不够一屏，无法继续触发。并且修复`lock()`，增加参数可以手动锁定上方或者下方。
上次加了默认内容过少自动触发加载下方内容。结果又被吐槽，只有加个参数autoLoad，要么自动触发加载内容，不够一屏继续加载，要么不触发。另外，增加`dropReload（）` API，可以方便类似微博APP点首页就加载页面效果。目前是默认加载下方内容。另外tab功能还没想出来怎么做，容我再想想～～～

[历史背景介绍](Intro.md)

## 最新版本

### 0.7.0(151225)
### 0.8.0(160202)

* 增加默认判断内容过少自动加载下方内容
* 优化`lock()`，默认智能判断，如加参数`lock('up')`锁定上方，如加参数`lock('down')`锁定下方
* 优化默认判断内容过少自动加载下方内容，如果加载一次不满一屏，继续加载，超过一屏为止
* 增加参数autoLoad
* 增加`dropReload（）` API，方便手动调用加载底部方法

[所有更新日志](Changelog.md)

Expand All @@ -26,7 +27,10 @@
[DEMO2，加载顶部、底部](http://ximan.github.io/dropload/examples/load-top-bottom.html)

![扫一扫](examples/product-list.png)
[DEMO3，固定布局，加载顶部、底部](http://ximan.github.io/dropload/examples/product-list.html)
[DEMO3，特殊布局，加载顶部、底部](http://ximan.github.io/dropload/examples/product-list.html)

![扫一扫](examples/multiple-load.png)
[DEMO4，按需加载](http://ximan.github.io/dropload/examples/multiple-load.html)

## 依赖

Expand Down Expand Up @@ -62,15 +66,14 @@ $('.element').dropload({
});
````

进阶用法详见上面DEMO2，DEMO3

## 参数列表

| 参数 | 说明 | 默认值 | 可填值 |
|------------|-------------|--------|----------------|
| scrollArea | 滑动区域 | 绑定元素自身 | window |
| domUp | 上方DOM | {<br/>domClass : 'dropload-up',<br/>domRefresh : '&lt;div class="dropload-refresh"&gt;↓下拉刷新&lt;/div&gt;',<br/>domUpdate : '&lt;div class="dropload-update"&gt;↑释放更新&lt;/div&gt;',<br/>domLoad : '&lt;div class="dropload-load"&gt;○加载中...&lt;/div&gt;'<br/>} | 数组 |
| domDown | 下方DOM | {<br/>domClass : 'dropload-down',<br/>domRefresh : '&lt;div class="dropload-refresh"&gt;↑上拉加载更多&lt;/div&gt;',<br/>domLoad : '&lt;div class="dropload-load"&gt;○加载中...&lt;/div&gt;',<br/>domNoData : '&lt;div class="dropload-noData"&gt;暂无数据&lt;/div&gt;'<br/>} | 数组 |
| autoLoad | 自动加载 | true | true和false |
| distance | 拉动距离 | 50 | 数字 |
| threshold | 提前加载距离 | 加载区高度2/3 | 正整数 |
| loadUpFn | 上方function | 空 | function(me){<br/>//你的代码<br/>me.resetload();<br/>} |
Expand All @@ -94,6 +97,17 @@ $('.element').dropload({

`resetload()` 重置。每次数据加载完，必须重置

`dropReload()` 手动加载

## 已知问题

* 由于部分Android中UC和QQ浏览器头部有地址栏，并且一开始滑动页面隐藏地址栏时，无法触发scroll和resize，所以会导致部分情况无法使用。解决方案1：增加distance距离，例如DEMO2中distance:50；解决方案2：加`meta`使之全屏显示
````
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
````
例如DEMO1

## dropload使用交流群

[群号：290725368，点击加群](http://shang.qq.com/wpa/qunwpa?idkey=2c58606fdfb5d6be4021a678e1506fdbbbc480aabdca0eeb115c2f4ff5bc69ee)
70 changes: 46 additions & 24 deletions dist/dropload.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* dropload
* 西门
* 0.7.0(151225)
* 0.8.0(160202)
*/

;(function($){
Expand All @@ -15,7 +15,7 @@
};
var MyDropLoad = function(element, options){
var me = this;
me.$element = $(element);
me.$element = element;
// 上方是否插入DOM
me.upInsertDOM = false;
// loading状态
Expand All @@ -26,6 +26,7 @@
// 是否有数据
me.isData = true;
me._scrollTop = 0;
me._threshold = 0;
me.init(options);
};

Expand All @@ -46,6 +47,7 @@
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData : '<div class="dropload-noData">暂无数据</div>'
},
autoLoad : true, // 自动加载
distance : 50, // 拉动距离
threshold : '', // 提前加载距离
loadUpFn : '', // 上方function
Expand All @@ -58,6 +60,14 @@
me.$domDown = $('.'+me.opts.domDown.domClass);
}

// 计算提前加载距离
if(me.opts.threshold === ''){
// 默认滑到加载区2/3处时加载
me._threshold = Math.floor(me.$domDown.height()*1/3);
}else{
me._threshold = me.opts.threshold;
}

// 判断滚动区域
if(me.opts.scrollArea == win){
me.$scrollArea = $win;
Expand All @@ -70,11 +80,7 @@
me._scrollContentHeight = me.$element[0].scrollHeight;
me._scrollWindowHeight = me.$element.height();
}

// 如果文档高度不大于窗口高度，数据较少，自动加载下方数据
if(me._scrollContentHeight <= me._scrollWindowHeight){
fnLoadDown();
}
fnAutoLoad(me);

// 窗口调整
$win.on('resize',function(){
Expand Down Expand Up @@ -105,28 +111,17 @@
}
});



// 加载下方
me.$scrollArea.on('scroll',function(){
me._scrollTop = me.$scrollArea.scrollTop();
if(me.opts.threshold === ''){
// 默认滑到加载区2/3处时加载
me._threshold = Math.floor(me.$domDown.height()*1/3);
}else{
me._threshold = me.opts.threshold;
}


// 滚动页面触发加载数据
if(me.opts.loadDownFn != '' && !me.loading && !me.isLockDown && (me._scrollContentHeight - me._threshold) <= (me._scrollWindowHeight + me._scrollTop)){
fnLoadDown();
loadDown(me);
}
});

// 加载下方方法
function fnLoadDown(){
me.direction = 'up';
me.$domDown.html(me.opts.domDown.domLoad);
me.loading = true;
me.opts.loadDownFn(me);
}
};

// touches
Expand Down Expand Up @@ -208,6 +203,15 @@
}
}

// 如果文档高度不大于窗口高度，数据较少，自动加载下方数据
function fnAutoLoad(me){
if(me.opts.autoLoad){
if((me._scrollContentHeight - me._threshold) <= me._scrollWindowHeight){
loadDown(me);
}
}
}

// 重新获取文档高度
function fnRecoverContentHeight(me){
if(me.opts.scrollArea == win){
Expand All @@ -217,6 +221,14 @@
}
}

// 加载下方
function loadDown(me){
me.direction = 'up';
me.$domDown.html(me.opts.domDown.domLoad);
me.loading = true;
me.opts.loadDownFn(me);
}

// 锁定
MyDropLoad.prototype.lock = function(direction){
var me = this;
Expand Down Expand Up @@ -255,6 +267,16 @@
me.isData = false;
};

// 加载
MyDropLoad.prototype.dropReload = function(){
var me = this;
// 如果有数据
if(me.isData){
fnRecoverContentHeight(me);
fnAutoLoad(me);
}
};

// 重置
MyDropLoad.prototype.resetload = function(){
var me = this;
Expand All @@ -271,7 +293,7 @@
if(me.isData){
// 加载区修改样式
me.$domDown.html(me.opts.domDown.domRefresh);
fnRecoverContentHeight(me);
me.dropReload();
}else{
// 如果没数据
me.$domDown.html(me.opts.domDown.domNoData);
Expand Down
4 changes: 2 additions & 2 deletions dist/dropload.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 30 additions & 0 deletions examples/json/more.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,36 @@
"pic":"http://d8.yihaodianimg.com/N05/M05/BE/72/ChEbulTYbhyAY_DmAAGmsWjdGgY32601_80x80.jpg",
"link":"#10",
"date":"2015-12-10"
},
{
"title":"vivo X6A 全网通4G手机 4GB+64GB 双卡双待 金色",
"pic":"http://d7.yihaodianimg.com/N05/M0B/89/7D/CgQI01Zb6yGAL2SWAAWXMCmZ7gk97001_80x80.jpg",
"link":"#11",
"date":"2015-12-11"
},
{
"title":"金来 X7 5.5英寸大屏 移动联通双4G手机 智能指纹识别 双卡双待土豪金16GB非合约机官方标配",
"pic":"http://d9.yihaodianimg.com/N10/M09/69/F7/ChEi3FZf6C-AIC74AAOQYliXK7g41100_80x80.jpg",
"link":"#12",
"date":"2015-12-12"
},
{
"title":"Haier海尔 M351L 中文超大按键 一键呼救超大音量弧面老人手机黑色0MB非合约机官方标配",
"pic":"http://d8.yihaodianimg.com/N07/M0A/26/E3/CgQI0FaOLTqAYj5tAAJ-GtDx_Fk90800_80x80.jpg",
"link":"#13",
"date":"2015-12-13"
},
{
"title":"Samsung 三星 Galaxy A7(2016) A7100 白色 16G 移动联通电信4G手机 双卡双待",
"pic":"http://d7.yihaodianimg.com/N06/M05/F8/C4/ChEbu1Zw_n6ALMiLAAILdjwAoqw20801_80x80.jpg",
"link":"#14",
"date":"2015-12-14"
},
{
"title":"Haier海尔 M352L 移动/联通2G 翻盖老人机 2.4英寸屏老人手机 长待机老年机金色0MB非合约机官方标配",
"pic":"http://d8.yihaodianimg.com/N05/M0A/82/F7/CgQI01ZYI-KAMMwzAAFW6ZSR3Tg50500_80x80.jpg",
"link":"#15",
"date":"2015-12-15"
}
]
}
Loading

0 comments on commit 0bf26a0

Please sign in to comment.