移动端滑屏全应用【二】滑屏封装注意事项与移动端轮播-白红宇的个人博客

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

发布日期：2021-05-09 05:52:30 浏览次数：17 分类：博客文章

本文共 6461 字，大约阅读时间需要 21 分钟。

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

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 += '
'        } else {            _this.pager.innerHTML += '
'        }    })    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()

有问题可留言。

上一篇：移动端滑屏全应用【三】requestAnimationFrame的兼容与使用

下一篇：centos7 - 安裝 Python 3.7

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章