標籤：++ 需要 === 移動 else box function on() flow
<!-- 需求：上下滑動，在一個大的div塊裡顯示5個小的值，滑動過程中自動擷取中間位置的值 需要注意的是： 1 touchmove會多次被觸發； 2 擷取中間位置的值可以通過定位得top值來擷取 3 以1到99為例，上下滑動時一定注意若取中間值，首尾一定需要切值滑動到中間位置； 當頁面顯示為 93 94 95 96 97時，在向上滑動時 ，假設在滑動divHeight*5的距離， 這樣最後頁面顯示將只存在98 99 ，取中間值時將為空白； 同樣顯示為 3,4,5,6,7時，在向下滑動滑動時 ，假設在滑動divHeight*5的距離， 這樣最後頁面顯示將只存在98 99 ，取中間值時將為空白； 但是需要注意的是最小值和最大值必須在中間位置出現 --><!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telephone=no, email=no" /> <title>Document</title> <style> #id { width: 200px; height: 150px; background: red; position: fixed; left: 34%; top:0px; overflow:hidden; } .box{ width:100%; height:100%; } .age-item{ width: 30px; height: 30px; background: green; border: solid 1px grey; position:absolute; /*top:0;*/ } .box .age-option-select{ font-size: 16px; color: #ffffff; background-color: #0000ff; } </style> <script> function cons(idx){ console.log(idx) } function load() { /*單指拖動*/ var itemHeight = 30; //每個item選項的高度 var obj = document.querySelector(‘.box‘); var html2 = ‘‘; for(var i=1;i<100;i++){ html2+=‘<div class="age-item" onclick="cons(‘+i+‘)" style="top:‘+(i-1)*itemHeight+‘px">‘+i+‘</div>‘ } obj.innerHTML = html2; var touchStart = 0; var touchEnd =0; var ageOption = document.getElementsByClassName(‘age-item‘); changeSelectStyle(ageOption); obj.addEventListener("touchstart", function(event) { var touch = event.targetTouches[0]; touchStart = touch.pageY; obj.addEventListener(‘touchmove‘, function(event) { // 如果這個元素的位置內只有一個手指的話 if (event.targetTouches.length == 1) { event.preventDefault(); // 阻止瀏覽器預設事件 var touch = event.targetTouches[0]; touchEnd = touch.pageY; } }, false); }); obj.addEventListener("touchend", function() { var ages = document.getElementsByClassName(‘age-item‘); if(touchEnd-touchStart>0){ //向下滑 var ageItem = 0; for(let j=0;j<ages.length;j++){ if(ages[j].style.top == ‘0px‘|| ages[j].style.top == 0){ ageItem = ages[j].innerHTML; break; } } if(parseInt(ages[0].style.top)>=2*itemHeight){ return; }else{ if(parseInt(ageItem)+1 < Math.ceil((touchEnd-touchStart)/itemHeight)){ var diff = parseInt(ageItem)+1; changeTop(ages,diff); }else{ var diff = Math.ceil((touchEnd-touchStart)/itemHeight); changeTop(ages,diff); } } }else{ //向上滑 var ageItem = 0; for(let k=ages.length-1;k>0;k--){ if(ages[k].style.top == 4*itemHeight +‘px‘){ ageItem = ages[k].innerHTML; break; } } if(parseInt(ages[ages.length-1].style.top)<=2*itemHeight){ return; }else{ if(ageItem==‘‘){ var diff = -1; changeTop(ages,diff); }else if((99-parseInt(ageItem))+2<Math.ceil(Math.abs(touchEnd-touchStart)/itemHeight)){ var diff = parseInt(ageItem)-99-2; changeTop(ages,diff); }else{ var diff = Math.ceil((touchEnd-touchStart)/itemHeight); changeTop(ages,diff); } } } // 由於上面需要修改99次樣式，需要進行99次的重繪；可以修改為重新插入一次，在此不詳細列出 delEvent(obj,‘touchstart‘); delEvent(obj,‘touchmove‘); }); function delEvent(obj,evt,fn,useCapture){ if (obj.removeEventListener) { //先使用W3C的方法移除事件處理函數 obj.removeEventListener(evt,fn,!!useCapture); }else { if(obj.__EventHandles){ var fns = obj.__EventHandles[evt]; if(fns){delete fns[fn.__EventID];} } } } function changeTop(obj,diff){ for(let k=0;k<obj.length;k++){ obj[k].style.top = parseInt(obj[k].style.top) + diff*itemHeight +‘px‘; } changeSelectStyle(ageOption); } function changeSelectStyle(arr){ for(var i=0 ; i < arr.length ; i++){ if(hasClass(‘age-option-select‘,arr[i])){ removeClass(‘age-option-select‘,arr[i]) } if(arr[i].style.top!=undefined && arr[i].style.top == 2*itemHeight+‘px‘){ if(!hasClass(‘age-option-select‘,arr[i])){ addClass(‘age-option-select‘,arr[i]) } } } } } // 公有方法 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var allClass = element.className.trim().split(" "); return allClass.indexOf(cla) > -1; } function addClass(cla,element){ if(!hasClass(cla,element)){ if(element.setAttribute){ element.setAttribute("class",element.getAttribute("class")+" "+cla); }else{ element.className = element.className+" "+cla; } } } function removeClass(cla,element){ if(hasClass(cla,element)){ var allClass = element.className.trim().split(" "); allClass.splice(allClass.indexOf(cla),1); element.className = allClass.join(‘ ‘); } } </script></head><body onload="load()"> <div id="inp"></div> <div id="id" style="top:0px;"> <div class="box" style="top:0px;"> </div> </div></body></html>
純js實現移動端滑動控制項，以上下滑動自取中間位置年齡為例；
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
