拖动滑动

缺乏、安全感 2022-06-01 09:08 181阅读 0赞

<a href="http://download.csdn.net/detail/linjiqian/9713492">示例源码下载CSDN http://download.csdn.net/detail/linjiqian/9713492</a>
    
      
       <a href="#1">1.touch事件</a> <a href="#2">2.xScroll滑动案例</a>
    
      
       <h5 id="1">1.touch事件</h5>
    
      
       touchstart：手指触摸绑定事件元素时触发。 　　touchmove：滑动连续触发。 　　touchend：松开触发。 　　touchcancel：据说是系统取消跟踪时触发，但是并未尝试过。
    
      
       这些touch事件依然在捕获和冒泡流程之中，touch事件回调并未定义成dom对象中的属性（不像onclick这些事件）所以一般使用addEventListener方法进行事件绑定。
    
      
       dom.addEventListener("touchxxx",function(e){}); 
      
       </br> </br>
      
       <h5 id="2">2.xScroll滑动案例</h5>
      
       目录结构： 　　　　两个html分别是横向滑动和竖向滑动。js文件封装滑动函数，实现区分下拉至顶上拉至低的回调，可用于下拉刷新上拉加载更多。
      
       
    
      
       Paste_Image.png 
      
       效果图：
      
       scrolldemo1.gif.gif 
      
       scrolldemo2.gif.gif 
      
       这种滑动方式使用偏移translateX、translateY的方式达到移动自身的目的，需要将多出内容隐藏则套进一个overflow为hidden的容器中，滑动元素保持自身长度或者高度，有一个偏移值一定为0，而另一个则通过(父容器高||宽 - 滑动元素高或||宽)的方式计算得出。 如：上下滑动，ul下拉translateY最多偏移至0，ul上拉translateY最多偏移div.offsetHeight - ul.offsetHeight就到底部了。
      
       var div = document.querySelector("div"); var ul = document.querySelector("ul"); var span = document.querySelector("span"); xScroll.scroll(ul,0,div.offsetHeight - ul.offsetHeight,true,function(e,o){ if(undefined == o) return; o ? span.innerHTML = "下拉到顶" : span.innerHTML = "上拉到低"; }); 
      
       xScroll.js ：
      
       /** * Created by ThingLin on 2016/12/15. */ /** * web移动端滑动，实现下拉刷新与上拉加载更多 * @type { {transitionTime: string, scroll: Function, xTrans: {translateX: Function, translateY: Function, removeTransition: Function, addTransition: Function}, onTip: Function}} */ window.xScroll = { "transitionTime": ".5", /** * * @param dom 执行侧滑的dom元素对象，额外添加属性 xScrollCoord = {"moveX": 0, "moveY": 0}; 记录当前滑动到的位置 * dom == jQuery对象时转为dom元素对象 * 通过 dom.xInitParameters对象保存所有初始参数 * 通过 dom.xScrollCoord 对象保存移动坐标参数 * @param maxTranslate 滑动上限 * @param minTranslate 滑动下限 * @param isVertical true上下滑动，false || undefined 左右滑动 * 左右滑动例 ： xScroll.scroll(dom,0,-300); *@param touchendCallBackFun call(this,e,orientation) -->> this触发事件dom元素对象，e触发事件对象， * orientation滑动方向(如垂直（isVertical = true）则可通过该参数得到是下拉刷新还是上拉加载更多) * isVertical ? orientation ？下拉至顶 ：上拉至底 : orientation ? 左滑到底 : 右滑到底 * orientation == undefined -->> 未滑至上限或者下限 */ scroll: function (dom, maxTranslate, minTranslate, isVertical,touchendCallBackFun) { if(!maxTranslate) maxTranslate = 0; if(!minTranslate) throw "minTranslate : "+minTranslate; if("function" == typeof isVertical){ touchendCallBackFun = isVertical; isVertical = false; } if (dom.jquery) { dom = dom[0]; } dom.xInitParameters = { "xstart":0,"xdifference":0,"xisMove":false,"xmaxTranslate":maxTranslate,"xminTranslate":minTranslate ,"xisVertical" : isVertical,"xtouchendCallBackFun":touchendCallBackFun}; dom.xScrollCoord = { "moveX": 0, "moveY": 0}; dom.addEventListener("touchstart", function (e) { if (this.xInitParameters.xisVertical) this.xInitParameters.xstart = e.touches[0].clientY; else this.xInitParameters.xstart = e.touches[0].clientX; }); dom.addEventListener("touchend", function (e) { if (!this.xInitParameters.xisMove) { return; } var orientation = undefined; if (this.xInitParameters.xisVertical) { if ((this.xScrollCoord.moveY + this.xInitParameters.xdifference) > this.xInitParameters.xmaxTranslate) { this.xScrollCoord.moveY = this.xInitParameters.xmaxTranslate; orientation = true; } else if ((this.xScrollCoord.moveY + this.xInitParameters.xdifference) < this.xInitParameters.xminTranslate) { this.xScrollCoord.moveY = this.xInitParameters.xminTranslate; orientation = false; } else { this.xScrollCoord.moveY += this.xInitParameters.xdifference; } xScroll.xTrans.translateY(this, this.xScrollCoord.moveY); } else { if ((this.xScrollCoord.moveX + this.xInitParameters.xdifference) > this.xInitParameters.xmaxTranslate) { this.xScrollCoord.moveX = this.xInitParameters.xmaxTranslate; orientation = false; } else if ((this.xScrollCoord.moveX + this.xInitParameters.xdifference) < this.xInitParameters.xminTranslate) { this.xScrollCoord.moveX = this.xInitParameters.xminTranslate; orientation = true; } else { this.xScrollCoord.moveX += this.xInitParameters.xdifference; } xScroll.xTrans.translateX(this, this.xScrollCoord.moveX); } xScroll.xTrans.addTransition(this, parseFloat(xScroll.transitionTime) + "s"); this.xInitParameters.xisMove = false; if(this.xInitParameters.xtouchendCallBackFun && "function" == typeof this.xInitParameters.xtouchendCallBackFun) this.xInitParameters.xtouchendCallBackFun.call(this,e,orientation); }); dom.addEventListener("touchmove", function (e) { this.xInitParameters.xisMove = true; xScroll.xTrans.removeTransition(this); if (this.xInitParameters.xisVertical) { var clientY = e.touches[0].clientY; this.xInitParameters.xdifference = clientY - this.xInitParameters.xstart; xScroll.xTrans.translateY(this, this.xScrollCoord.moveY + this.xInitParameters.xdifference); } else { var clientX = e.touches[0].clientX; this.xInitParameters.xdifference = clientX - this.xInitParameters.xstart; xScroll.xTrans.translateX(this, this.xScrollCoord.moveX + this.xInitParameters.xdifference); } }); }, xTrans: { translateX: function (dom, x) { dom.style["transform"] = "translateX(" + x + "px)"; dom.style["webkitTransform"] = "translateX(" + x + "px)"; }, translateY: function (dom, y) { dom.style["transform"] = "translateY(" + y + "px)"; dom.style["webkitTransform"] = "translateY(" + y + "px)"; }, removeTransition: function (dom) { dom.style.transition = "none"; dom.style.webkitTransition = "none"; }, addTransition: function (dom, timer) { dom.style.transition = timer; dom.style.webkitTransition = timer; }, }, /** * 快速点击 * @param dom * @param clallBackFun */ onTip: function (dom, clallBackFun) { if (dom && typeof dom == "object") { dom.xonTipParameters = { "isMove":false,"timer":0,"clallBackFun":clallBackFun}; dom.addEventListener("touchstart", function (e) { this.xonTipParameters.timer = Date.now(); this.xonTipParameters.isMove = false; }); dom.addEventListener("touchmove", function (e) { this.xonTipParameters.isMove = true; }); dom.addEventListener("touchend", function (e) { if (!this.xonTipParameters.isMove && Date.now() - this.xonTipParameters.timer < 80 && this.xonTipParameters.clallBackFun && "function" == typeof this.xonTipParameters.clallBackFun) { this.xonTipParameters.clallBackFun.call(this, e); } }); } } } 
      
       scrollhorizontal.html ：
      
       <!DOCTYPE html> <html> <head lang="en"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <meta charset="UTF-8"> <title></title> <style> body,html,ul{ padding: 0; margin: 0; } div{ max-width: 640px; overflow: hidden; } ul{ clear: both; list-style: none; width: 1999px; height: 30px; /* 如果不设置高度，则第一次滑动正常，之后滑动都不会响应touchmove事件 */ } ul>li{ float: left; width: 50px; text-align: center; background-color: #9155aa; height: 30px; line-height: 30px; } a{ display: block; height: 50px; background-color: #23527c; } </style> <script src="xScroll.js"></script> <script type="text/javascript"> onload = function(){ var div = document.querySelector("div"); var ul = document.querySelector("ul"); var span = document.querySelector("span"); // TODO li标签浮动ul不设置高度,第一次滑动可以正常响应touchmove事件，之后不再响应touchmove事件，但是响应touchstart和touchend var min = 0; var ul_lis = ul.children; for(var i=0;i<ul_lis.length;i++) min += ul_lis[i].offsetWidth; xScroll.scroll(ul,0,div.offsetWidth - min,function(e,o){ if(undefined == o) return; o ? span.innerHTML = "左滑到顶" : span.innerHTML = "右滑到底" ; }); }; </script> </head> <body> <span>二狗子</span> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul> </div> </body> </html> 
      
       scrollvertical.html ：
      
       <!DOCTYPE html> <html> <head lang="en"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <meta charset="UTF-8"> <title></title> <style> html,body{ height: 100%; overflow: hidden; margin: 0; padding: 0; background-color: #ccc; } div{ max-width: 640px; overflow: hidden; height: 100%; } ul{ clear: both; list-style: none; padding-left: 0px; margin: 0px; } ul>li{ text-align: center; background-color: #9155aa; height: 50px; line-height: 50px; margin-top: 2px; } span{ position: fixed; top: 30px; z-index: 2; } </style> <script src="xScroll.js"></script> <script type="text/javascript"> onload = function(){ var div = document.querySelector("div"); var ul = document.querySelector("ul"); var span = document.querySelector("span"); xScroll.scroll(ul,0,div.offsetHeight - ul.offsetHeight,true,function(e,o){ if(undefined == o) return; o ? span.innerHTML = "下拉到顶" : span.innerHTML = "上拉到低"; }); var lis = ul.children; for(var i=0;i<lis.length;i++) xScroll.onTip(lis[i],function(e){ console.log(this.innerHTML) }); }; </script> </head> <body> <span>瓜娃子</span> <div> <ul> <li>月色倍清</li> <li>刀锋倍冷</li> <li>茫茫天涯路</li> <li>迷人月儿薄纱背后</li> <li>谁在妄想把天偷</li> <li>烈酒最香</li> <li>毒花最美</li> <li>如何去消受</li> <li>谁能料想明日酒醒以后</li> <li>人尚暖</li> <li>头还在</li> <li>在欢呼声中竟充满毒咒</li> <li>床中的枕与食早施布了陷阱</li> <li>掌握的一双手</li> <li>亦忽变作拳头</li> <li>鲜血未冷</li> <li>情义已尽</li> <li>何日刀锋断我愁?</li> </ul> </div> </body> </html> 
      
       </br> </br> </br>
     
      
    
    作者：ThingLin
    链接：https://www.jianshu.com/p/afb3aa9e519a
    來源：简书
    著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。