diff --git a/README.md b/README.md
index 29b6371..de23893 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# dropDownLoad 插件 v1.1.2 
+# dropDownLoad 插件 v2.0.1 
### 下拉加载插件 主要实现下滑翻页的功能 提供一套完整的流程 包括加载动画、插入动画 以及各种状态下的事件处理
@@ -35,9 +35,9 @@ var opt = {
presetLoadingAnime: '', // 预置加载动画 默认为 '小圈圈'
presetInsertAnime: '', // 预置载入动画 默认为 '大风车'
- // 构建 DOM 模版 数据为 JSON 形式时 创建出的 DOM 的结构 默认值为一个 DIV 元素 data-name 属性和数据名称对应 IMG标签数据默认装载到其 src 属性内
- // Ajax JSON 数据页写法 请参照 “AJax Json形式示例” 文件
- pattern: '',
+ // DOM 模版 数据为 Obj 形式时 创建出的 DOM 的结构 装载数据字段 ~{数据 KEY }~ 和数据页名称对应
+ // Ajax 页写法 请参照 “AJax示例” 文件
+ pattern: '
~{content}~
~{content}~
~{content}~
'+ (toString(this._data) + '') +'
';
- };
-
- 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 = $('').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 可执行
@@ -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');
};
};
@@ -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');
};
}
};
diff --git "a/dist/Ajax_Dom\346\240\274\345\274\217\347\244\272\344\276\213.html" "b/dist/Ajax_Dom\346\240\274\345\274\217\347\244\272\344\276\213.html"
new file mode 100644
index 0000000..433a8f8
--- /dev/null
+++ "b/dist/Ajax_Dom\346\240\274\345\274\217\347\244\272\344\276\213.html"
@@ -0,0 +1,32 @@
+
+
+
+
+ 2333333333333
+
+
+
+
+ 2333333333333
+
+
+
+
+ 2333333333333
+
+
+
+
+ 2333333333333
+
+
~{content}~
'+ (toString(this._data) + '') +'
';
- };
-
- 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 = $('').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 可执行
@@ -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');
};
};
@@ -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');
};
}
};
diff --git a/dist/package.json b/dist/package.json
index ae4c2ac..4b76f07 100644
--- a/dist/package.json
+++ b/dist/package.json
@@ -1,7 +1,7 @@
{
"name": "TopuNet-dropDownLoad",
- "version": "1.1.2",
- "description": "Topu.net 下拉加载插件",
+ "version": "2.0.1",
+ "description": "Topu.net 滑屏加载插件",
"main": "Readme.md",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"