javascript - 原生js写的移动端日期选择, 怎么让他是适配到页面端。
本文介绍了javascript - 原生js写的移动端日期选择, 怎么让他是适配到页面端。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
原生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);
}
在页面端怎么都没用。。。
在移动端是可以滚动的。
需要让他适配到页面端。。
解决方案
你截取的是实现动画效果的那块,看了绑定动画的事件,全都绑定在 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 端上直接调用别的套件得了,
不用想这个本来针对移动端开发的套件如何适配页面端的问题。
这篇关于javascript - 原生js写的移动端日期选择, 怎么让他是适配到页面端。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文