Skip to content

Commit

Permalink
v2.0.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@Suscc
Suscc committed Aug 31, 2016
1 parent 91d8eaf commit 9fa590a
Show file tree
Hide file tree
Showing 10 changed files with 168 additions and 127 deletions.
14 changes: 10 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# dropDownLoad 插件 v1.1.2 ![233](https://raw.githubusercontent.com/TopuNet/dropDownLoad/master/demo/images/16471b1b26636f263a21115df68cb769.gif)
# dropDownLoad 插件 v2.0.1 ![233](https://raw.githubusercontent.com/TopuNet/dropDownLoad/master/demo/images/16471b1b26636f263a21115df68cb769.gif)
### 下拉加载插件 主要实现下滑翻页的功能 提供一套完整的流程 包括加载动画、插入动画 以及各种状态下的事件处理
<br />
<br />
Expand Down Expand Up @@ -35,9 +35,9 @@ var opt = {
presetLoadingAnime: '', // 预置加载动画 默认为 '小圈圈'
presetInsertAnime: '', // 预置载入动画 默认为 '大风车'

// 构建 DOM 模版 数据为 JSON 形式时 创建出的 DOM 的结构 默认值为一个 DIV 元素 data-name 属性和数据名称对应 IMG标签数据默认装载到其 src 属性内
// Ajax JSON 数据页写法 请参照 “AJax Json形式示例” 文件
pattern: '<li><div class="box"><img data-name="url" src="" alt="" /><div class="right" data-name="content"></div></div></li>',
// DOM 模版 数据为 Obj 形式时 创建出的 DOM 的结构 装载数据字段 ~{数据 KEY }~ 和数据页名称对应
// Ajax 页写法 请参照 “AJax示例” 文件
pattern: '<li><div class="box"><img src="~{url}~" alt="" /><div class="right">~{content}~</div></div></li>',

// 以下俩个参数可接收函数 数据加载完成后执行 如需滚动到功能 可接收一个 Number(px) | String -> 比如 '10px' '10vw' 等类型的值 也可让函数返回这两个类型的值 触发滚动
exceedRolling: function () {
Expand Down Expand Up @@ -90,3 +90,9 @@ dropDownLoad.init(opt);

### v1.1.2
1. 修复初始内容不够一屏时 加载动画一直显示的问题

### v2.0.1(啊哈哈哈哈)
1. 完善动态构建 Dom Ajax 数据装载形式
2. 添加对完整 Html 结构的 Ajax 加载方式的载入动画的支持
3. 修复 Zepto 下加载动画不居中的问题
4. 细节上的优化 更加完善的 README
0 demo/ajax_json.html → demo/ajax_obj.html
View file
File renamed without changes.
3 changes: 2 additions & 1 deletion demo/inc/dropDownLoad_Anima.css
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,16 +199,16 @@
presetLoadingAnime: '', // 预置加载动画 默认为 '小圈圈'
presetInsertAnime: '', // 预置载入动画 默认为 '大风车'

// 构建 DOM 模版 数据为 JSON 形式时 创建出的 DOM 的结构 默认值为一个 DIV 元素 data-name 属性和数据名称对应 IMG标签数据默认装载到其 src 属性内
// Ajax JSON 数据页写法 请参照 Demo 文件
pattern: '<li><div class="box"><img data-name="url" src="" alt="" /><div class="right" data-name="content"></div></div></li>',
// DOM 模版 数据为 Obj 形式时 创建出的 DOM 的结构 装载数据字段 ~{数据 KEY }~ 和数据页名称对应
// Ajax 页写法 请参照 “AJax示例” 文件
pattern: '<li><div class="box"><img src="~{url}~" alt="" /><div class="right">~{content}~</div></div></li>',

// 以下俩个参数可接收函数 数据加载完成后执行 如需滚动到功能 可接收一个 Number(px) | String -> 比如 '10px' '10vw' 等类型的值 也可让函数返回这两个类型的值 触发滚动
exceedRolling: null, // 内容超过视区后
lowerRolling: '', // 内容不超出视区 默认为滚动到加载内容的末尾(加载动画之上) 如需取消默认行为 传 Null

// Ajax
url: 'ajax_json.html',
url: 'ajax_obj.html',
type: 'GET', // 默认 GET 方式
ajaxData: {}, // Ajax 传参
page: 0, // 默认值为 0 起始页数 程序中自行累加
Expand Down
115 changes: 58 additions & 57 deletions demo/jq/dropDownLoad.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*
Suscc
20160811
下拉加载插件 v1.1.2
20160831
滑屏加载插件 v2.0.1
*/
/* ----------------------------------------------------------------------------
// --- //
Expand All @@ -17,9 +17,9 @@ animeCssPath: './dist/app/css', // Anime CSS 路径 默认为 inc 目录下
presetLoadingAnime: '', // 预置加载动画 默认为 '小圈圈'
presetInsertAnime: '', // 预置载入动画 默认为 '大风车'
// 构建 DOM 模版 数据为 JSON 形式时 创建出的 DOM 的结构 默认值为一个 DIV 元素 data-name 属性和数据名称对应 IMG标签数据默认装载到其 src 属性内
// Ajax JSON 数据页写法 请参照 “AJax Json形式示例” 文件
pattern: '<li><div class="box"><img data-name="url" src="" alt="" /><div class="right" data-name="content"></div></div></li>',
// DOM 模版 数据为 Obj 形式时 创建出的 DOM 的结构 装载数据字段 ~{数据 KEY }~ 和数据页名称对应
// Ajax 页写法 请参照 “AJax示例” 文件
pattern: '<li><div class="box"><img src="~{imgUrl}~" alt="~{describe}~" /><div class="right">~{content}~</div></div></li>',
// 以下俩个参数可接收函数 数据加载完成后执行 如需滚动到功能 可接收一个 Number(px) | String -> 比如 '10px' '10vw' 等类型的值 也可让函数返回这两个类型的值 触发滚动
exceedRolling: function () {
Expand All @@ -44,6 +44,8 @@ var dropDownLoad = {
presetLoadingAnime: '小圈圈', // 默认加载动画
presetInsertAnime: 'rotateIn', // 默认载入动画

pattern: '→_→ 您看看自己是否忘了写些什么~',

lowerRolling: function (curAlHig) {
if (this.loader) {
return curAlHig - this.mainHig - this.loaderHig - 10;
Expand Down Expand Up @@ -101,8 +103,8 @@ var dropDownLoad = {
cancelAnimationFrame(_this.timer);
_this.timer = null;
_this.main.scrollTop(_this.nRolTag);
if (!_this.ajaxForm) {
_this.loading = false, _this.loader.show(0);
if (!_this.opt.presetInsertAnime) {
_this.loading = false, _this.loader.css('display', 'flex');
};
};
_this.isUp = false;
Expand Down Expand Up @@ -306,74 +308,71 @@ var dropDownLoad = {
this.loader.hide();

var _this = this,
domArr = [], // 存放创建出的所有 DOM 的数组 下面插入元素执行动画时用

// 插入模式
appendMode = function (i) {
appendMode = function () {
var obj = $(_this.opt.eleWrap);

switch (_this.opt.insertMode) {
case 'append':
i ? obj.append(_this._data) : obj.append(creatDom);
obj.append(oDom);
break;
case 'prepend':
i ? obj.prepend(_this._data) : obj.prepend(creatDom);
obj.prepend(oDom);
break;
case 'after':
i ? obj.after(_this._data) : obj.after(creatDom);
obj.after(oDom);
break;
case 'before':
i ? obj.before(_this._data) : obj.before(creatDom);
obj.before(oDom);
break;
}
},
// 插入动画准备
animeReady = function () {
if (_this.opt.presetInsertAnime) {
oDom.css({
'opacity': 0,
'will-change': 'transform, opacity'
});
domArr.push(oDom);
_this.apdAnimeTemp = 0;
};

appendMode();
};

// 判断数据形式是否为 JSON 形式
if (this.ajaxForm) {
// Pattern 默认值（默认一个 DIV 元素 并把 Ajax 数据直接插入进去）
if (!this.opt.pattern) {
this.opt.pattern = '<div>'+ (toString(this._data) + '') +'</div>';
};

var childDomLength = $(this.opt.pattern).find('*').length, // 所有元素数量
domDataName = $(this.opt.pattern).attr('data-name'), // 取名牌
domArr = []; // 存放创建出的所有 DOM 的数组 下面插入元素执行动画时用

for (var i = 0, dataLength = this._data.Data.length; i < dataLength; i++) {
var curDataRow = this._data.Data[i], // 当前的数据对象
creatDom = $(this.opt.pattern), // 创建出的 DOM 对象
childDom = creatDom.find('*'); // 所有的子元素
var curDataRow = this._data.Data[i],
creatDom = this.opt.pattern, // 创建出的 DOM 对象
oDom;

// 准备拿外层盒当容器
if (domDataName) {
creatDom.html(curDataRow[domDataName]);
} else {
// 遍历所有子元素 装载数据到对应元素内
for (var n = 0; n < childDomLength; n++) {
var curChild = childDom.eq(n), // 当前子元素
childDataName = curChild.attr('data-name'); // 取名牌

if (childDataName) {
// 如果是 IMG 标签 默认数据装载位置为其 src 属性
curChild.get(0).tagName == 'IMG' ? curChild.attr('src', curDataRow[childDataName]) : curChild.html(curDataRow[childDataName]);
};
};
for (key in curDataRow) {
var re = new RegExp('~\\{' + key + '\\}~',"gi");
creatDom = creatDom.replace(re, curDataRow[key]);
};

// 插入动画准备
if (this.opt.presetInsertAnime) {
creatDom.css('opacity', 0);
domArr.push(creatDom);
this.apdAnimeTemp = 0;
};
oDom = $(creatDom);

appendMode();
animeReady();
};

// 执行插入动画
this.opt.presetInsertAnime && this.apdAnime(domArr);
} else {
appendMode(true);
var oTempParent = $('<div></div>').append(_this._data),
oDom;

for (var i = 0, aChild = oTempParent.children('li'); i < aChild.length; i++) {
oDom = $(aChild[i]);

animeReady();
};
};

// 执行插入动画
this.opt.presetInsertAnime && this.apdAnime(domArr);
this._data = null; // 清空 重置

// 判断传进来的是个什么类型 如是 Function 可执行
Expand All @@ -397,14 +396,14 @@ var dropDownLoad = {
if (curAlHig - this.mainAllHig <= this.mainHig) {
if (this.opt.lowerRolling) {
Fn('lowerRolling');
} else {
this.loading = false, this.loader.show(0);
} else if (!this.opt.presetInsertAnime) {
this.loading = false, this.loader.css('display', 'flex');
};
} else {
if (this.opt.exceedRolling) {
Fn('exceedRolling');
} else {
this.loading = false, this.loader.show(0);
} else if (!this.opt.presetInsertAnime) {
this.loading = false, this.loader.css('display', 'flex');
};
};

Expand Down Expand Up @@ -437,22 +436,24 @@ var dropDownLoad = {
if (this.curScrTop != tag) {
this.timer = requestAnimationFrame(function () { _this.rolling(tag) });
} else {
if (!this.ajaxForm) { this.loading = false; this.loader.show(0); };
if (!this.opt.presetInsertAnime) { this.loading = false; this.loader.css('display', 'flex'); };
this.timer = null;
};
},

// 载入动画
apdAnime: function (domArr) {
var _this = this;
var _this = this,
cur = domArr[this.apdAnimeTemp];

domArr[this.apdAnimeTemp].css({ 'animation-duration': '1s', 'opacity': 1 }).addClass(this.opt.presetInsertAnime);
cur.css({ 'animation-duration': '1s', 'opacity': 1 }).addClass(this.opt.presetInsertAnime);

if (++this.apdAnimeTemp != domArr.length) {
setTimeout(function () { _this.apdAnime(domArr); }, 300);
setTimeout(function () { cur.css('will-change', 'auto'); _this.apdAnime(domArr); }, 300);
} else {
cur.css('will-change', 'auto');
this.loading = false;
this.loader.show(0);
this.loader.css('display', 'flex');
};
}
};
Expand Down
32 changes: 32 additions & 0 deletions dist/Ajax_Dom格式示例.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<li>
<div class="box">
<img src="http://i1.hdslb.com/320_200/video/42/4240e0b103fbf4ea53180c12279d9284.jpg" alt="" />
<div class="right">
2333333333333
</div>
</div>
</li>
<li>
<div class="box">
<img src="http://i1.hdslb.com/320_200/video/42/4240e0b103fbf4ea53180c12279d9284.jpg" alt="" />
<div class="right">
2333333333333
</div>
</div>
</li>
<li>
<div class="box">
<img src="http://i1.hdslb.com/320_200/video/42/4240e0b103fbf4ea53180c12279d9284.jpg" alt="" />
<div class="right">
2333333333333
</div>
</div>
</li>
<li>
<div class="box">
<img src="http://i1.hdslb.com/320_200/video/42/4240e0b103fbf4ea53180c12279d9284.jpg" alt="" />
<div class="right">
2333333333333
</div>
</div>
</li>
1 change: 0 additions & 1 deletion dist/Ajax Json形式示例.html → dist/Ajax_Obj格式示例.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
<!-- 所以东西 写到名为 Data 的数组里 一个数据集合对应一个 Json 对象(请删除这条 否则解析 Json 时会报错) -->
"Data": [
{
"url": "images/4240e0b103fbf4ea53180c12279d9284.jpg",
Expand Down
3 changes: 2 additions & 1 deletion dist/inc/dropDownLoad_Anima.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 9fa590a

Please sign in to comment.