首页 > 代码库 > 原生方法实现移动端的手动触摸滚动
原生方法实现移动端的手动触摸滚动
var isScrolling, startPos, endPos; var slider = { //判断设备是否支持touch事件 touch: (‘ontouchstart‘ in window) || window.DocumentTouch && document instanceof DocumentTouch, slider: document.getElementById(‘sliderBox‘), //事件 events: { index: 0, //显示元素的索引 slider: this.slider, //this为slider对象 icons: document.getElementById(‘sliderBox‘), icon: document.getElementById(‘sliderBox‘).getElementsByClassName(‘swiper-slide‘), handleEvent: function (event) { var self = this; //this指events对象 if (event.type == ‘touchstart‘) { self.start(event); } else if (event.type == ‘touchmove‘) { self.move(event); } else if (event.type == ‘touchend‘) { self.end(event); } }, //滑动开始 start: function (event) { var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch,取第一个touch startPos = {x: touch.pageX, y: touch.pageY, time: +new Date}; //取第一个touch的坐标值 isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动 if (isScrolling == 0) { this.icons.appendChild(this.icon[0]); } this.icons.addEventListener(‘touchmove‘, this, false); this.icons.addEventListener(‘touchend‘, this, false); }, //移动 move: function (event) { //当屏幕有多个touch或者页面被缩放过,就不执行move操作 if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return; var touch = event.targetTouches[0]; endPos = {x: touch.pageX - startPos.x, y: touch.pageY - startPos.y}; isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0; //isScrolling为1时,表示纵向滑动,0为横向滑动 if (isScrolling == 0) { event.preventDefault(); //阻止触摸事件的默认行为,即阻止滚屏 } }, //滑动释放 end: function (event) { var duration = +new Date - startPos.time; //滑动的持续时间 if (isScrolling === 0) { //当为水平滚动时 //this.icon[this.index].className = ‘prize-box swiper-slide‘; if (Number(duration) > 10) { //判断是左移还是右移,当偏移量大于10时执行 if (endPos.x > 10) { if (this.index !== 0) this.index -= 1; } else if (endPos.x < -10) { if (this.index !== this.icon.length - 1) this.index += 1; } } console.log(this.index); this.icon[0].className = ‘prize-box swiper-slide first‘; this.icon[1].className = ‘prize-box swiper-slide active‘; this.icon[2].className = ‘prize-box swiper-slide last‘; //this.icons.style.left = -this.index*600 + ‘px‘; } //解绑事件 this.icons.removeEventListener(‘touchmove‘, this, false); this.icons.removeEventListener(‘touchend‘, this, false); } }, //初始化 init: function () { var self = this; //this指slider对象 if (!!self.touch) self.slider.addEventListener(‘touchstart‘, self.events, false); //addEventListener第二个参数可以传一个对象,会调用该对象的handleEvent属性 } }; slider.init();
原生方法实现移动端的手动触摸滚动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。