移动端滑屏封装注意事项：
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()
有问题可留言。
原文地址：https://www.cnblogs.com/pomelott/p/10054737.html
时间： 2024-10-10 07:48:22