移动端滑屏全应用滑屏封装注意事项与移动端轮播

Posted 2021-01-24 pomelott

移动端滑屏封装注意事项：

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()

有问题可留言。