js原生实现切换分页，并预加载上下分页(H5).md
2018-03-26 本文已影响1161人
冰Q
闲着无聊，开发个分页切换脚本，如有问题，请在评论下指出
- 页面HTML代码
<div id="swiper_container">
<div class="swiper_subject"></div>
</div>
- 参数说明
curPage 当前页码，不传默认为 1
height 容器swipter_container 的高度，不传默认取body高度，单位 px
width 容器swipter_container 的宽度，不传默认取body宽度， 单位 px
el 父容器的class/id，请保证唯一值
wrapper 子容器的class
direction 切换方向，默认竖直方向切换 竖-vertical 横-parallel
time Number值 页面切换动画效果时长 单位 秒 默认 1S
minDistance 设置手指移动多长距离后开始开始判断是否移动容器 默认 20
maxDistance 设置手指移动多长距离后开始开始判断是否切换页面 默认 40
successFun 获取数据成功后需要执行的方法，需传参 className/totalPage
failFun 获取数据失败后需要执行的方法，需传参 className
getData 传入获取数据的方法，在初始化后，默认必调取一次getData方法，并传出四个参数，className-数据存放的分页容器class，page-该分页的页码，successFun-获取数据成功后需要执行的方法，需传参 className/totalPage，failFun-获取数据失败后需要执行的方法，需传参 className
- js调用
var swiper = new PageSwiper({
"curPage" : pageGlobal.curPageFund,
"height": "350px",
"el" : "#swiper_container",
"wrapper" : ".swiper_subject",
"getData" : function(className, page, successFun, failFun) {
// 初始化数据
// getDataAjax 为获取数据的方法
getDataAjax(className, page, successFun, failFun)
}
});
- 代码
/**
* 该方法竖直方向切换有个小BUG，容器高度不能出现滚动条，否则会冲突，后期改善
* curPage 当前页码
* el 目标元素
* direction 切换方向，默认横方向切换 竖-vertical 横-parallel
* time Number 页面切换效果时长 单位 秒 默认 1S
* wrapper 子容器的元素
* height 容器高度 单位 px
* width 容器宽度 单位 px
* minDistance 设置手指移动多长距离后开始开始判断是否移动容器 默认 20
* maxDistance 设置手指移动多长距离后开始开始判断是否切换页面 默认 40
* successFun 获取数据成功后需要执行的方法，需传参 className/totalPage
* failFun 获取数据失败后需要执行的方法，需传参 className
*/
function PageSwiper(options) {
var _this = this;
this.direction = options.direction || "parallel";
this.curPage = options.curPage || 1;
this.totalPage = options.totalPage || 1;
this.startPageX = 0;
this.endPageX = 0;
this.startPageY = 0;
this.endPageY = 0;
this.moveDistanceX = 0; // 手指横向移动距离
this.moveDistanceY = 0; // 手指竖向移动距离
this.minDistance = 20; // 设置手指移动多长距离后开始开始判断是否移动容器
this.maxDistance = 80; // 设置手指移动多长距离后开始开始判断是否切换页面
this.time = options.time || 1;
this.loadPreFinish= true; // 判断加载是否完成
this.loadNextFinish= true;
this.width;
this.height;
this.currentPageMoveDistance = 0;
this.refresh = false;
this.getData = (function() {
if(options.getData) {
return options.getData;
}
alert("getData不能为空！");
return;
})();
this.el = (function() {
var el = options.el ? options.el : "#swiper_container";
var elem = document.querySelector(el);
if(elem) {
_this.elClassName = options.el + " ";
return elem;
}
alert("el不能为空！");
return;
})();
this.wrapper = (function() {
var wrapper = options.wrapper ? options.wrapper : ".current_swiper_subject";
var elem = document.querySelector(wrapper);
if(elem) {
return elem;
}
alert("wrapper不能为空！");
return;
})();
this.getStartTouchGrid = function(event) {
event.preventDefault();
event.stopPropagation();
var touch = event.touches[0];
_this.startPageX = touch.pageX;
_this.startPageY = touch.pageY;
_this.endPageX = touch.pageX;
_this.endPageY = touch.pageY;
};
this.getTouchMoveGrid = function() {
event.preventDefault();
event.stopPropagation();
var touch = event.touches[0];
_this.moveDistanceX = touch.pageX - _this.endPageX;
_this.moveDistanceY = touch.pageY - _this.endPageY;
_this.endPageX = touch.pageX;
_this.endPageY = touch.pageY;
if(_this.direction === "vertical") {
if(_this.moveDistanceY > 0) {
// 向下方向移动
if(_this.curPage === 1) return;
// 先判断是否已加载完成
var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
var isMoveDistanceY = Number(transform.substring(7).split(",")[5].replace(")", ""));
if(Math.abs(isMoveDistanceY) <= 0 && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
// 判断数据是否加载成功，成功请在当前子容器上添加class true
var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
var children = _this.el.children;
var cur_curPage_index = [].indexOf.call(children, cur_curPage);
if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index + 1 == children.length && _this.wrapper.getAttribute("getData")== "false")) {
if(Math.abs(_this.endPageY - _this.startPageY) >= _this.minDistance && Math.abs(_this.endPageY - _this.startPageY) <= Number(_this.height.replace("px", ""))) {
// 开始移动容器
var hasMoveDistanceY = isMoveDistanceY + _this.moveDistanceY;
_this.el.style.transform = "translate3d(0, "+hasMoveDistanceY+"px, 0)";
}
}
} else {
// 向上方向移动
if(_this.curPage === _this.totalPage) return;
// 先判断是否已加载完成
console.log(_this.el, 5555)
var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
var isMoveDistanceY = Number(transform.substring(7).split(",")[5].replace(")", ""));
if(Math.abs(isMoveDistanceY) >= (_this.el.children.length - 1) * Number(_this.height.replace("px", "")) && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
var children = _this.el.children;
var cur_curPage_index = [].indexOf.call(children, cur_curPage);
if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index === 0 && _this.wrapper.getAttribute("getData")== "false")) {
if(Math.abs(_this.endPageY - _this.startPageY) >= _this.minDistance && Math.abs(_this.endPageY - _this.startPageY) <= Number(_this.height.replace("px", ""))) {
// 开始移动容器
var hasMoveDistanceY = isMoveDistanceY + _this.moveDistanceY;
_this.el.style.transform = "translate3d(0, "+hasMoveDistanceY+"px, 0)";
}
}
}
} else {
if(_this.moveDistanceX > 0) {
// 向右方向移动
if(_this.curPage === 1) return;
// 先判断是否已加载完成
var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
var isMoveDistanceX = Number(transform.substring(7).split(",")[4]);
if(Math.abs(isMoveDistanceX) <= 0 && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
// 判断数据是否加载成功，成功请在当前子容器上添加class true
var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
var children = _this.el.children;
var cur_curPage_index = [].indexOf.call(children, cur_curPage);
if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index + 1 == children.length && _this.wrapper.getAttribute("getData")== "false")) {
if(Math.abs(_this.endPageX - _this.startPageX) >= _this.minDistance && Math.abs(_this.endPageX - _this.startPageX) <= Number(_this.width.replace("px", ""))) {
// 开始移动容器
var hasMoveDistanceX = isMoveDistanceX + _this.moveDistanceX;
_this.el.style.transform = "translate3d("+hasMoveDistanceX+"px, 0, 0)";
}
}
} else {
// 向左方向移动
if(_this.curPage === _this.totalPage) return;
// 先判断是否已加载完成
var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
var isMoveDistanceX = Number(transform.substring(7).split(",")[4]);
if(Math.abs(isMoveDistanceX) >= (_this.el.children.length - 1) * Number(_this.width.replace("px", "")) && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
if(_this.wrapper.getAttribute("class").indexOf("next_swiper_subject") >= 0 && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
var children = _this.el.children;
var cur_curPage_index = [].indexOf.call(children, cur_curPage);
if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index === 0 && _this.wrapper.getAttribute("getData")== "false")) {
if(Math.abs(_this.endPageX - _this.startPageX) >= _this.minDistance && Math.abs(_this.endPageX - _this.startPageX) <= Number(_this.width.replace("px", ""))) {
// 开始移动容器
var hasMoveDistanceX = isMoveDistanceX + _this.moveDistanceX;
_this.el.style.transform = "translate3d("+hasMoveDistanceX+"px, 0, 0)";
}
}
}
}
}
this.getTouchEndGrid = function() {
event.preventDefault();
event.stopPropagation();
if(_this.direction === "vertical") {
if(_this.endPageY - _this.startPageY > 0) {
// 向下方向移动
if(_this.curPage === 1) return;
// 先判断是否已加载完成
var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
var isMoveDistanceY = Number(transform.substring(7).split(",")[5].replace(")", ""));
if(Math.abs(isMoveDistanceY) <= 0 && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
var children = _this.el.children;
var cur_curPage_index = [].indexOf.call(children, cur_curPage);
if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index + 1 == children.length && _this.wrapper.getAttribute("getData")== "false")) {
var hasMoveDistanceY = isMoveDistanceY;
if(Math.abs(_this.endPageY - _this.startPageY) >= _this.maxDistance) {
// 翻页
var needMoveDistanceY = Number(_this.height.replace("px", "")) - (_this.currentPageMoveDistance - Math.abs(hasMoveDistanceY));
_this.el.style.transform = "translate3d(0, "+(hasMoveDistanceY + needMoveDistanceY)+"px, 0)";
_this.el.style.transition = "transform, "+_this.time+"s";
_this.currentPageMoveDistance -= Number(_this.height.replace("px", ""));
setTimeout(function() {
_this.el.style.transition = "transform, 0s";
}, _this.time * 1000);
var timer1 = setInterval(function() {
// 先判断是否已加载完成
if(_this.loadNextFinish && _this.loadPreFinish) {
clearInterval(timer1)
// 重新赋值
var old_prePage = document.querySelector(_this.elClassName + ".pre_swiper_subject");
var old_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
var old_nextPage = document.querySelector(_this.elClassName + ".next_swiper_subject");
var children = _this.el.children;
var old_prePage_index = [].indexOf.call(children, old_prePage);
old_prePage.setAttribute("class", old_prePage.className.replace("pre_swiper_subject", "current_swiper_subject"));
old_curPage.setAttribute("class", old_curPage.className.replace("current_swiper_subject", "next_swiper_subject"));
if(old_nextPage) {
// 可能会不存在下一页
old_nextPage.setAttribute("class", old_nextPage.className.replace("next_swiper_subject", ""));
}
_this.wrapper = old_prePage;
_this.curPage -= 1;
if(old_prePage_index == 0) {
// 当前页是第一页
if(_this.curPage !== 1 && old_prePage.getAttribute("getData")== "true") {
_this.generatePrePage(_this.curPage - 1);
_this.el.style.height = Number(_this.el.style.height.replace("px", "")) + Number(_this.height.replace("px", "")) + "px";
_this.el.style.transform = "translate3d(0, -"+(_this.currentPageMoveDistance + Number(_this.height.replace("px", "")))+"px, 0)";
_this.currentPageMoveDistance += Number(_this.height.replace("px", ""));
}
} else {
// 已存在上一页
children[old_prePage_index - 1].setAttribute("class", children[old_prePage_index - 1].className+" pre_swiper_subject");
}
}
}, 10)
} else {
// 回退到当前页面
_this.el.style.transform = "translate3d(0, -"+_this.currentPageMoveDistance+"px, 0)";
}
}
} else {
// 向上方向移动
if(_this.curPage === _this.totalPage) return;
// 先判断是否已加载完成
var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
var isMoveDistanceY = Number(transform.substring(7).split(",")[5].replace(")", ""));
if(Math.abs(isMoveDistanceY) >= (_this.el.children.length - 1) * Number(_this.height.replace("px", "")) && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
var children = _this.el.children;
var cur_curPage_index = [].indexOf.call(children, cur_curPage);
if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index === 0 && _this.wrapper.getAttribute("getData")== "false")) {
var hasMoveDistanceY = isMoveDistanceY;
if(Math.abs(_this.endPageY - _this.startPageY) >= _this.maxDistance) {
// 翻页
var needMoveDistanceY = Number(_this.height.replace("px", "")) - (Math.abs(hasMoveDistanceY) - _this.currentPageMoveDistance);
_this.el.style.transform = "translate3d(0, "+(hasMoveDistanceY - needMoveDistanceY)+"px, 0)";
_this.el.style.transition = "transform, "+_this.time+"s";
_this.currentPageMoveDistance += Number(_this.height.replace("px", ""));
setTimeout(function() {
_this.el.style.transition = "transform, 0s";
}, _this.time * 1000);
var timer2 = setInterval(function() {
// 先判断是否已加载完成
if(_this.loadNextFinish && _this.loadPreFinish) {
clearInterval(timer2);
// 重新赋值
var old_prePage = document.querySelector(_this.elClassName + ".pre_swiper_subject");
var old_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
var old_nextPage = document.querySelector(_this.elClassName + ".next_swiper_subject");
var children = _this.el.children;
var old_nextPage_index = [].indexOf.call(children, old_nextPage);
if(old_prePage) {
// 可能会不存在上一页
old_prePage.setAttribute("class", old_prePage.className.replace("pre_swiper_subject", ""));
}
old_curPage.setAttribute("class", old_curPage.className.replace("current_swiper_subject", "pre_swiper_subject"));
old_nextPage.setAttribute("class", old_nextPage.className.replace("next_swiper_subject", "current_swiper_subject"));
_this.wrapper = old_nextPage;
_this.curPage += 1;
if(old_nextPage_index + 1 === children.length) {
// 当前页已是最后一页
if(_this.curPage !== _this.totalPage && old_nextPage.getAttribute("getData")== "true") {
_this.generateNextPage(_this.curPage + 1);
_this.el.style.height = Number(_this.el.style.height.replace("px", "")) + Number(_this.height.replace("px", "")) + "px";
}
} else {
// 已存在下一页
children[old_nextPage_index + 1].setAttribute("class", children[old_nextPage_index + 1].className+" next_swiper_subject");
}
}
}, 10);
} else {
// 回退到当前页面
_this.el.style.transform = "translate3d(0, -"+_this.currentPageMoveDistance+"px, 0)";
}
}
}
} else {
if(_this.endPageX - _this.startPageX > 0) {
// 向右方向移动
if(_this.curPage === 1) return;
// 先判断是否已加载完成
var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
var isMoveDistanceX = Number(transform.substring(7).split(",")[4]);
if(Math.abs(isMoveDistanceX) <= 0 && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
var children = _this.el.children;
var cur_curPage_index = [].indexOf.call(children, cur_curPage);
if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index + 1 == children.length && _this.wrapper.getAttribute("getData")== "false")) {
var hasMoveDistanceX = isMoveDistanceX;
if(Math.abs(_this.endPageX - _this.startPageX) >= _this.maxDistance) {
// 翻页
var needMoveDistanceX = Number(_this.width.replace("px", "")) - (_this.currentPageMoveDistance - Math.abs(hasMoveDistanceX));
_this.el.style.transform = "translate3d("+(hasMoveDistanceX + needMoveDistanceX)+"px, 0, 0)";
_this.el.style.transition = "transform, "+_this.time+"s";
_this.currentPageMoveDistance -= Number(_this.width.replace("px", ""));
setTimeout(function() {
_this.el.style.transition = "transform, 0s";
}, _this.time * 1000);
var timer1 = setInterval(function() {
// 先判断是否已加载完成
if(_this.loadNextFinish && _this.loadPreFinish) {
clearInterval(timer1)
// 重新赋值
var old_prePage = document.querySelector(_this.elClassName + ".pre_swiper_subject");
var old_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
var old_nextPage = document.querySelector(_this.elClassName + ".next_swiper_subject");
var children = _this.el.children;
var old_prePage_index = [].indexOf.call(children, old_prePage);
old_prePage.setAttribute("class", old_prePage.className.replace("pre_swiper_subject", "current_swiper_subject"));
old_curPage.setAttribute("class", old_curPage.className.replace("current_swiper_subject", "next_swiper_subject"));
if(old_nextPage) {
// 可能会不存在下一页
old_nextPage.setAttribute("class", old_nextPage.className.replace("next_swiper_subject", ""));
}
_this.wrapper = old_prePage;
_this.curPage -= 1;
if(old_prePage_index == 0) {
// 当前页是第一页
if(_this.curPage !== 1 && old_prePage.getAttribute("getData")== "true") {
_this.generatePrePage(_this.curPage - 1);
_this.el.style.width = Number(_this.el.style.width.replace("px", "")) + Number(_this.width.replace("px", "")) + "px";
_this.el.style.transform = "translate3d(-"+(_this.currentPageMoveDistance + Number(_this.width.replace("px", "")))+"px, 0, 0)";
_this.currentPageMoveDistance += Number(_this.width.replace("px", ""));
}
} else {
// 已存在上一页
children[old_prePage_index - 1].setAttribute("class", children[old_prePage_index - 1].className+" pre_swiper_subject");
}
}
}, 10)
} else {
// 回退到当前页面
_this.el.style.transform = "translate3d(-"+_this.currentPageMoveDistance+"px, 0, 0)";
}
}
} else {
// 向左方向移动
if(_this.curPage === _this.totalPage) return;
// 先判断是否已加载完成
var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
var isMoveDistanceX = Number(transform.substring(7).split(",")[4]);
if(Math.abs(isMoveDistanceX) >= (_this.el.children.length - 1) * Number(_this.width.replace("px", "")) && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
var children = _this.el.children;
var cur_curPage_index = [].indexOf.call(children, cur_curPage);
if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index === 0 && _this.wrapper.getAttribute("getData")== "false")) {
var hasMoveDistanceX = isMoveDistanceX;
if(Math.abs(_this.endPageX - _this.startPageX) >= _this.maxDistance) {
// 翻页
var needMoveDistanceX = Number(_this.width.replace("px", "")) - (Math.abs(hasMoveDistanceX) - _this.currentPageMoveDistance);
_this.el.style.transform = "translate3d("+(hasMoveDistanceX - needMoveDistanceX)+"px, 0, 0)";
_this.el.style.transition = "transform, "+_this.time+"s";
_this.currentPageMoveDistance += Number(_this.width.replace("px", ""));
setTimeout(function() {
_this.el.style.transition = "transform, 0s";
}, _this.time * 1000);
var timer2 = setInterval(function() {
// 先判断是否已加载完成
if(_this.loadNextFinish && _this.loadPreFinish) {
clearInterval(timer2);
// 重新赋值
var old_prePage = document.querySelector(_this.elClassName + ".pre_swiper_subject");
var old_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
var old_nextPage = document.querySelector(_this.elClassName + ".next_swiper_subject");
var children = _this.el.children;
var old_nextPage_index = [].indexOf.call(children, old_nextPage);
if(old_prePage) {
// 可能会不存在上一页
old_prePage.setAttribute("class", old_prePage.className.replace("pre_swiper_subject", ""));
}
old_curPage.setAttribute("class", old_curPage.className.replace("current_swiper_subject", "pre_swiper_subject"));
old_nextPage.setAttribute("class", old_nextPage.className.replace("next_swiper_subject", "current_swiper_subject"));
_this.wrapper = old_nextPage;
_this.curPage += 1;
if(old_nextPage_index + 1 === children.length) {
// 当前页已是最后一页
if(_this.curPage !== _this.totalPage && old_nextPage.getAttribute("getData")== "true") {
_this.generateNextPage(_this.curPage + 1);
_this.el.style.width = Number(_this.el.style.width.replace("px", "")) + Number(_this.width.replace("px", "")) + "px";
}
} else {
// 已存在下一页
children[old_nextPage_index + 1].setAttribute("class", children[old_nextPage_index + 1].className+" next_swiper_subject");
}
}
}, 10);
} else {
// 回退到当前页面
_this.el.style.transform = "translate3d(-"+_this.currentPageMoveDistance+"px, 0, 0)";
}
}
}
}
}
/**
* 生成上一页的容器
*/
this.generatePrePage = function(page, boolean) {
_this.loadPreFinish = false;
var className = _this.wrapper.getAttribute("class");
className = className.replace("current_swiper_subject", "pre_swiper_subject").replace("true", "");
var prePage = document.createElement("div");
prePage.className = className;
if(_this.direction !== "vertical") {
prePage.style.float = "left";
prePage.style.overflowX = "hidden";
prePage.style.overflowY = "auto";
prePage.style.padding = "0 2px";
} else {
prePage.style.overflow = "hidden";
}
prePage.style.height = _this.height;
prePage.style.width = _this.width;
if(!boolean) {
prePage.innerHTML = "<div>加载中...</div>";
}
_this.el.insertBefore(prePage,_this.el.firstChild);
_this.getData(_this.elClassName + ".pre_swiper_subject", page, _this.successFun, _this.failFun);
}
/**
* 生成下一页的容器
*/
this.generateNextPage = function(page) {
_this.loadNextFinish = false;
var className = _this.wrapper.getAttribute("class");
className = className.replace("current_swiper_subject", "next_swiper_subject").replace("true", "");
var nextPage = document.createElement("div");
nextPage.className = className;
if(_this.direction !== "vertical") {
nextPage.style.float = "left";
nextPage.style.overflowX = "hidden";
nextPage.style.overflowY = "auto";
nextPage.style.padding = "0 2px";
} else {
nextPage.style.overflow = "hidden";
}
nextPage.style.height = _this.height;
nextPage.style.width = _this.width;
nextPage.innerHTML = "<div>加载中2...</div>";
_this.el.appendChild(nextPage);
_this.getData(_this.elClassName + ".next_swiper_subject", page, _this.successFun, _this.failFun);
}
/**
* successFun 获取数据成功后需要执行的方法
*/
this.successFun = function(className, totalPages) {
_this.totalPage = totalPages;
var elem = document.querySelector(className);
if(!elem.getAttribute("getData")) {
elem.setAttribute("getData", "true");
} else if(elem.getAttribute("getData") == "false") {
// refress-data重新获取数据，成功后的回调
var children = _this.el.children;
var elem_index = [].indexOf.call(children, elem);
if(elem_index === 0) {
// 当前页为第一页
if(_this.curPage !== 1) {
_this.generatePrePage(_this.curPage - 1);
_this.el.style.width = Number(_this.el.style.width.replace("px", "")) + Number(_this.width.replace("px", "")) + "px";
_this.el.style.transform = "translate3d(-"+(_this.currentPageMoveDistance + Number(_this.width.replace("px", "")))+"px, 0, 0)";
_this.currentPageMoveDistance += Number(_this.width.replace("px", ""));
}
} else {
if(_this.curPage !== _this.totalPage) {
_this.generateNextPage(_this.curPage + 1);
_this.el.style.width = Number(_this.el.style.width.replace("px", "")) + Number(_this.width.replace("px", "")) + "px";
}
}
}
if(className.indexOf(".pre_swiper_subject") >= 0) {
_this.loadPreFinish = true;
} else if(className.indexOf(".next_swiper_subject") >= 0) {
_this.loadNextFinish = true;
}
}
/**
* failFun 获取数据失败后需要执行的方法
*/
this.failFun = function(className) {
var elem = document.querySelector(className);
elem.setAttribute("getData", "false");
elem.innerHTML = '<div><span class="refress-data" style="color: blue;">重新刷新</span></div>';
document.querySelector(_this.elClassName + ".refress-data").addEventListener("touchstart", function() {
_this.getData(_this.elClassName + ".current_swiper_subject", _this.curPage, _this.successFun, _this.failFun);
});
if(className.indexOf(".pre_swiper_subject") >= 0) {
_this.loadPreFinish = true;
} else if(className.indexOf(".next_swiper_subject") >= 0) {
_this.loadNextFinish = true;
}
}
/**
* 添加事件
*/
this.addEvent = function() {
//_this.el.addEventListener("touchstart", _this.getStartTouchGrid);
// _this.el.addEventListener("touchmove", _this.getTouchMoveGrid);
//_this.el.addEventListener("touchend", _this.getTouchEndGrid);
_this.el.ontouchstart = getStartTouchGrid;
_this.el.ontouchmove = getTouchMoveGrid;
_this.el.ontouchend = getTouchEndGrid;
}
/**
* 移除事件
*/
this.removeEvent = function() {
_this.el.removeEventListener("touchstart", _this.getStartTouchGrid);
_this.el.removeEventListener("touchmove", _this.getTouchMoveGrid);
_this.el.removeEventListener("touchend", _this.getTouchEndGrid);
}
/**
* 初始化插件
*/
this.initSwiper = function() {
_this.addEvent();
// 为当前页面添加class
if(_this.direction === "vertical") {
var contianer = document.createElement("div");
contianer.style.height = options.height ? Number(options.height.replace("px", "")) + "px" : document.body.clientHeight + "px" ;
contianer.style.width = options.width || document.body.clientWidth + "px" ;
_this.el.style.overflow = "hidden";
_this.el.style.height = options.height || document.body.clientHeight + "px" ;
_this.el.style.width = options.width || document.body.clientWidth + "px" ;
_this.el.innerHTML = "";
_this.el.appendChild(contianer);
_this.el = contianer;
_this.el.appendChild(_this.wrapper);
_this.height = options.height || document.body.clientHeight + "px";
_this.width = options.width || _this.el.offsetWidth + "px";
_this.wrapper.style.overflow = "hidden";
} else {
_this.el.style.height = options.height || document.body.clientHeight + "px" ;
_this.el.style.width = options.width ? Number(options.width.replace("px", "")) + "px" : document.body.clientWidth + "px";
_this.wrapper.style.float = "left";
_this.wrapper.style.overflowX = "hidden";
_this.wrapper.style.overflowY = "auto";
_this.wrapper.style.padding = "0 2px";
_this.height = options.height || _this.el.offsetHeight + "px";
_this.width = options.width || document.body.clientWidth + "px";
}
_this.wrapper.style.height = _this.height;
_this.wrapper.style.width = _this.width;
// 自动生成上下一页的内容容器及数据
if(_this.curPage !== 1) {
// 非首页
_this.generatePrePage(_this.curPage - 1, true);
_this.el.style.width = Number(_this.el.style.width.replace("px", "")) + Number(_this.width.replace("px", "")) + "px";
var elem = document.querySelector(_this.elClassName + ".pre_swiper_subject");
if(_this.direction === "vertical") {
_this.el.style.transform = "translate3d(0, -"+_this.height+", 0)";
_this.currentPageMoveDistance = Number(_this.height.replace("px", ""));
} else {
_this.el.style.transform = "translate3d(-"+_this.width+", 0, 0)";
_this.currentPageMoveDistance = Number(_this.width.replace("px", ""));
}
};
if(_this.curPage !== _this.totalPage) {
// 存在下一页
_this.generateNextPage(_this.curPage + 1);
_this.el.style.width = Number(_this.el.style.width.replace("px", "")) + Number(_this.width.replace("px", "")) + "px";
}
}
/**
* 初始化，获取数据
*/
this.init = function() {
var classList = _this.wrapper.getAttribute("class");
if(classList.indexOf("current_swiper_subject") == -1) {
_this.wrapper.setAttribute("class", classList + " current_swiper_subject");
}
_this.getData(_this.elClassName + ".current_swiper_subject", _this.curPage, _this.successFun, _this.failFun);
}
// 初始化，只在初次构建才会执行初始化
if(!_this.refresh && _this.el && _this.wrapper && _this.getData) {
_this.refresh = true;
_this.init();
_this.initSwiper();
}
}
