移动端滑屏全应用【二】滑屏封装注意事项与移动端轮播
移动端滑屏封装注意事项：
1.touchMove时候方向判断（可以控制在 以x轴位中心正负15度之内为横向滑屏，纵向滑屏同理）
2.上下滑屏与左右滑屏的冲突(判断用户滑动方向后，只做单方向的处理)
3.安卓触摸(例如某个人手指很粗)触发touchMove（记录上一次的手指坐标，每一次move的时候判断，上次的坐标与这一次的坐标相同则return掉）
移动端轮播封装注意事项：
1.使用transition做过度效果时，需要在每次start的时候清除transition，否则效果会有卡顿
2.每次end时算出当前应处于的位置，再利用transition做过渡效果
3.做无缝滚动时，需要在将结点复制一份，在start时判断：若是第一张，则迅速移动到新复制结点的第一张；若是最后一张，则迅速移动到第一份结点的最后一张。（仿照PC端复制第一张和最后一张行不通）
轮播图封装如下：
function transform (el, attr, val) { if (!el.transform) { el.transform = { }; } if (val === undefined) { return el.transform[attr]; } el.transform[attr] = val; var str = ""; // 此处要注意必须要在原由的基础上遍历 for (var s in el.transform) { switch (s) { case "rotate": case "rotateX": case "rotateY": case "rotateZ": case "skewX": case "skewY": str += s + "(" + el.transform[s] + "deg) "; break; case "scale": case "scaleX": case "scaleY": str += s + "(" + el.transform[s] + ") "; break; case "translateX": case "translateY": case "translateZ": str += s + "(" + el.transform[s] + "px) "; break; } } el.style.WebkitTransform = el.style.transform = str; } function css (el, attr, val) { var transformAttr = ["rotate", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "scale", "scaleX", "scaleY", "translateX", "translateY", "translateZ"]; for (var i = 0; i < transformAttr.length; i++) { if (attr === transformAttr[i]) { return transform(el, attr, val); } } if (val === undefined) { val = getComputedStyle(el)[attr]; val = parseFloat(val); return val; } if (attr === "opacity") { el.style[attr] = val; } else { el.style[attr] = val + "px"; } } function TSwiper (obj) { obj = obj || {}; this.default = { wrapper: '#wrapper', dir: 'x', start: {}, target: {}, interval: 3000, beforeSlide: function () {}, afterSlide: function () {}, dirHandler: { x: 'translateX', y: 'translateY' }, changedVal: { x: 'pageX', y: 'pageY' } }; for (var index in this.default) { if (!obj[index]) { obj[index] = this.default[index]; } } this.wrapper = obj.wrapper; this.nowPos = null; // 当前位置的translate this.dir = obj.dir; // 方向 x || y this.start = obj.start; this.target = obj.target; this.interval = obj.interval; this.beforeSlide = obj.beforeSlide; // 手指刚触摸时的回调，可依赖注入当前滑动结点，实践对象和当前swiper实例对象 this.afterSlide = obj.afterSlide; // 滑屏结束后的回调，依赖注入值同上 this.autoTimer = null; this.now = 0; } TSwiper.prototype.init = function () { var _this = this; this.wrapper = document.querySelector(this.wrapper); this.slideItem = document.querySelectorAll('.slide-item'); this.pager = document.querySelector('#pager'); this.aPagerItem = document.querySelectorAll('.pager-item'); this.slideItem.forEach(function (item, index) { item.style.width = window.outerWidth + 'px'; if (index === 0) { _this.pager.innerHTML += '<li class="pager-item active"></li>' } else { _this.pager.innerHTML += '<li class="pager-item"></li>' } }) this.aPagerItem = document.querySelectorAll('.pager-item'); this.wrapper.innerHTML += this.wrapper.innerHTML; // 将结点复制一份 css(_this.wrapper, 'translateX', 0); css(_this.wrapper, 'translateY', 0); css(_this.wrapper, 'translateZ', 0); this.wrapper.style.width = this.slideItem.length * 2 * window.outerWidth + 'px'; this.judge = function (specialIndexFn) { if (_this.now === 0) { _this.now = _this.slideItem.length; specialIndexFn && specialIndexFn(); } else if (_this.now === _this.slideItem.length * 2 - 1) { _this.now = _this.slideItem.length - 1; specialIndexFn && specialIndexFn(); } } this.setPageIndex = function () { let pageIndex; // 设置轮播点 pageIndex = _this.now % _this.slideItem.length; _this.aPagerItem.forEach(function (item, index) { item.className = ''; }) _this.aPagerItem[pageIndex].className = 'active'; } this.wrapper.addEventListener('touchstart', function (ev) { clearInterval(_this.autoTimer); _this.beforeSlide && _this.beforeSlide.call(_this.wrapper, ev, _this); _this.wrapper.style.transition = 'none'; // 初始化时清除过度，手指按下时需要设置判断并设置初始位置 _this.nowPos = css(_this.wrapper, _this.default.dirHandler[_this.dir]); _this.now = Math.round(Math.abs(_this.nowPos / window.outerWidth)) // 三张图片复制一份一共六张，如果是第一张，迅速移动到第四张，如果是第六张，迅速移动到第三张 _this.judge(); css(_this.wrapper, _this.default.dirHandler[_this.dir], -_this.now * window.outerWidth) _this.nowPos = css(_this.wrapper, _this.default.dirHandler[_this.dir]); _this.start.x = ev.changedTouches[0].pageX; _this.start.y = ev.changedTouches[0].pageY; }) _this.wrapper.addEventListener('touchmove', function (ev) { css(_this.wrapper, _this.default.dirHandler[_this.dir], _this.nowPos + ev.changedTouches[0][_this.default.changedVal[_this.dir]] - _this.start[_this.dir]) }) _this.wrapper.addEventListener('touchend', function (ev) { _this.nowPos = css(_this.wrapper, _this.default.dirHandler[_this.dir]); _this.now = Math.round(Math.abs(_this.nowPos / window.outerWidth)); _this.wrapper.style.transition = '0.3s'; _this.afterSlide && _this.afterSlide.call(_this.wrapper, ev, _this); css(_this.wrapper, _this.default.dirHandler[_this.dir], -_this.now * window.outerWidth); _this.setPageIndex(); _this.autoTimer = setInterval(_this.timerFn, _this.interval); }) _this.timerFn = function () { _this.wrapper.style.transition = 'none'; _this.judge(function () { css(_this.wrapper, _this.default.dirHandler[_this.dir], -_this.now * window.outerWidth); }); _this.now++; setTimeout(function () { _this.wrapper.style.transition = '0.3s'; css(_this.wrapper, _this.default.dirHandler[_this.dir], -_this.now * window.outerWidth); _this.setPageIndex(); }, 50) } _this.autoTimer = setInterval(_this.timerFn, _this.interval); } export default TSwiper
调用方法：
var tSwiper = new TSwiper().init()
有问题可留言。
