javascript - 原生js写的移动端日期选择， 怎么让他是适配到页面端。

Question

原生js写的移动端日期选择， 怎么让他是适配到页面端。 。。 下面的代码不是我写的。 我是从网上找过来的。

日期控件 地址链接：https://github.com/xfhxbb/lCa...

我是这上面下载过来了。。

//触摸开始
        function gearTouchStart(e) {
            e.preventDefault();
            var target = e.target;
            while (true) {
                if (!target.classList.contains("gear")) {
                    target = target.parentElement;
                } else {
                    break
                }
            }
            clearInterval(target["int_" + target.id]);
            target["old_" + target.id] = e.targetTouches[0].screenY;
            target["o_t_" + target.id] = (new Date()).getTime();
            var top = target.getAttribute('top');
            if (top) {
                target["o_d_" + target.id] = parseFloat(top.replace(/em/g, ""));
            } else {
                target["o_d_" + target.id] = 0;
            }
        }
        //手指移动
        function gearTouchMove(e) {
            e.preventDefault();
            var target = e.target;
            while (true) {
                if (!target.classList.contains("gear")) {
                    target = target.parentElement;
                } else {
                    break
                }
            }
            target["new_" + target.id] = e.targetTouches[0].screenY;
            target["n_t_" + target.id] = (new Date()).getTime();
            //var f = (target["new_" + target.id] - target["old_" + target.id]) * 18 / target.clientHeight;
            var f = (target["new_" + target.id] - target["old_" + target.id]) * 18 / 370;
            target["pos_" + target.id] = target["o_d_" + target.id] + f;
            target.style["-webkit-transform"] = 'translate3d(0,' + target["pos_" + target.id] + 'em,0)';
            target.setAttribute('top', target["pos_" + target.id] + 'em');
        }
        //离开屏幕
        function gearTouchEnd(e) {
            e.preventDefault();
            var target = e.target;
            while (true) {
                if (!target.classList.contains("gear")) {
                    target = target.parentElement;
                } else {
                    break;
                }
            }
            var flag = (target["new_" + target.id] - target["old_" + target.id]) / (target["n_t_" + target.id] - target["o_t_" + target.id]);
            if (Math.abs(flag) <= 0.2) {
                target["spd_" + target.id] = (flag < 0 ? -0.08 : 0.08);
            } else {
                if (Math.abs(flag) <= 0.5) {
                    target["spd_" + target.id] = (flag < 0 ? -0.16 : 0.16);
                } else {
                    target["spd_" + target.id] = flag / 2;
                }
            }
            if (!target["pos_" + target.id]) {
                target["pos_" + target.id] = 0;
            }
            rollGear(target);
        }
        
        
  

  
  
 在页面端怎么都没用。。。  
  

在移动端是可以滚动的。

需要让他适配到页面端。。

Answer 1

谢邀.
pc端没用是因为它所有绑定的事件都是touchstart、touchmove和touchend。你可以这样改下试试：首先在私有变量里加仨变量，然后在init里加段识别pc端还是移动端的代码，识别完了确定仨变量是移动端事件还是pc端事件，最后所有的事件绑定都改成这仨变量就好了。

Answer 2

你截取的是实现动画效果的那块，看了绑定动画的事件，全都绑定在 touch 事件上，
应该本来就不支持鼠标事件，试了下直接把这些动画绑定到鼠标事件是不匹配的。

首先你应该判断是否 PC 端，
其中一个方法如下：

function IsPC(){    
     var userAgentInfo = navigator.userAgent;  
     var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");    
     var flag = true;    
     for (var v = 0; v < Agents.length; v++) {    
         if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }    
     }    
     return flag;    
  }  

然后你可以对应绑定事件，对应关系如下：

mousedown	touchstart	pointerdown
mouseenter		pointerenter
mouseleave		pointerleave
mousemove	touchmove	pointermove
mouseout		pointerout
mouseover		pointerover
mouseup	touchend	pointerup

对此参考：https://mobiforge.com/design-...

最后页面端的拖拽动画得你自己弄了。。
另外一个解决方案是先判断 pc / 移动端，
在 pc 端上直接调用别的套件得了，
不用想这个本来针对移动端开发的套件如何适配页面端的问题。

Answer 3

谢邀。

个人建议PC端和移动端分开写，对于结构比较复杂的管理型系统，写响应式网页比分别针对 PC 和移动写两个版本成本和技术风险都要高得多。而且就是从用户体验的角度来说，PC 和移动本来就有不同的体验，分开写也更合适。纯展示性的页面写响应式问题不大，用响应式CSS框架就可以解决。